bootstrap學習 flex佈局
阿新 • • 發佈：2018-12-17
折騰了好久，在仿照bootstrap官網上的案例時沒有達到想要的效果
<ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
然而在我電腦上nav並沒有居中
後來發現是把ul套在了row裡，因為row自帶defalut:flex屬性，所以導致ul的.justify-content-center失效了，如果要修改的話就應該給row套上.justify-content-center就可以了（其實早就發現了這一點，但就是一直想找出為什麼官網成功居中了我沒有成功。。）
網上關於flex的語法教程實在是太泛泛了，看完之後怎麼用還是一臉懵逼
找到一個正確使用flex的例子：
<style> div{ display: flex; border: 1px solid #000; flex-direction: row; } p{ border: 1px solid red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-left: 20px; } </style> <body> <div> <p>1</p> <p>2</p> <p>3</p> </div> </body>
Flex佈局（一：基本概念和容器屬性）
Flex 佈局語法教程
其實就是把帶default:flex的物件作為一個容器，然後就可以通過在容器的css中指定各種屬性來安排子項的排列方式。在子項中加各種屬性是無效的。