flex:彈性佈局
任何一個容器都可以指定爲 flex 佈局
.box{ display: flex; }
行內元素也可以使用flex 佈局
.box{ display: inline-flex; }
對於webkit 內核的瀏覽器,必須加上-webkit 前綴
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意: 設置爲flex 佈局之後,子元素的float 、clear、 vertical-align(垂直文本對齊)都將失效
.box { flex-direction: row | row-reverse | column | column-reverse; }
下圖分別對應
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
.box { flex-flow: <flex-direction> || <flex-wrap>; }
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
如果所有項目的flex-grow屬性都爲1,則它們將等分剩餘空間(如果有的話)。如果一個項目的flex-grow屬性爲2,其他項目都爲1,則前者佔據的剩餘空間將比其他項多一倍。
如果所有項目的flex-shrink屬性都爲1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性爲0,其他項目都爲1,則空間不足時,前者不縮小。
負值對該屬性無效。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以設爲跟width或height屬性一樣的值(比如350px),則項目將佔據固定空間
該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因爲瀏覽器會推算相關值。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
本文來自阮一峯:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<style> *{padding: 0;margin: 0;} .box{ border: 1px solid black; display: flex; justify-content: center; } .box1{ width: 100px; height: 100px; background-color: darkcyan; } </style> </head> <body> <div class="box"> <div class="box1">1</div> </div> </body>
<style> *{padding: 0;margin: 0;} .box{ border: 1px solid black; display: flex; justify-content: center; } .box1{ width: 100px; height: 100px; background-color: darkcyan; border: 1px solid yellow; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> </div>
<style> *{padding: 0;margin: 0;} .box{ border: 1px solid black; display: flex; justify-content: space-between; } .box1{ width: 100px; height: 100px; background-color: darkcyan; border: 1px solid yellow; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> </div>
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
兩個相鄰間隔是自己的兩倍
justify-content: space-evenly;
均勻分佈
爲父級元素設置高度
<style> *{padding: 0;margin: 0;} .box{ border: 1px solid black; display: flex; justify-content: space-evenly; align-items: center; height: 500px; } .box1{ width: 100px; height: 100px; background-color: darkcyan; border: 1px solid yellow; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> </div>
<style> *{padding: 0;margin: 0;} .box{ border: 1px solid black; display: flex; align-items: center; height: 500px; flex-direction: column; } .box1{ width: 100px; height: 100px; background-color: darkcyan; border: 1px solid yellow; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> </div> </body>
.box{ border: 1px solid black; display: flex; align-items: center; height: 500px; flex-direction: column; justify-content: center; }
2. justify-content:space-around;
3. justify-content:space-between;
4. justify-content:space-evenly;
5. justify-content:flex-start;
6. justify-content:flex-end;