04.flex彈性盒模型 · 程序員開發筆記

[TOC] #### 簡介: ? Flex是Flexible Box的縮寫，意為"彈性布局"用來為盒狀模型提供最大的靈活性。 ? 任何一個容器都可以指定為Flex布局。 ? 采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。 ? 它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。 eg: <style type="text/css"> *{ padding: 0; margin: 0; } ul{ overflow: hidden; border: 2px solid purple; /*將外層容器轉換成彈性盒模型模式*/ display: flex; } ul li{ list-style: none; width: 130px; width: 300px; height: 200px; border: 2px solid dodgerblue; background: yellow; line-height: 200px; text-align: center; font-size: 30px; } </style> <body>     <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> #### flex-direction 設置主軸的方向該屬性決定主軸的方向（即項目的排列方向） ? row（默認值）：主軸為水平方向，起點在左端。 ? row-reverse：主軸為水平方向，起點在右端。 ? column：主軸為垂直方向，起點在上沿。 ? column-reverse：主軸為垂直方向，起點在下沿。 eg: <style type="text/css"> *{ padding: 0; margin: 0; } ul{ overflow: hidden; border: 2px solid purple; /*將外層容器轉換成彈性盒模型模式*/ width: 1100px; height: 550px; margin: 30px auto; display: flex; /*設置主軸方向*/ /*flex-direction: row-reverse;*/ flex-direction: column-reverse; } ul li{ list-style: none; width: 130px; width: 300px; height: 200px; border: 2px solid dodgerblue; background: yellow; /*line-height: 200px;*/ text-align: center; font-size: 30px; } </style> <body>  <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> #### justify-content ? 定義了項目在主軸上的對齊方式 ? flex-start（默認值）：左對齊 ? flex-end：右對齊 ? center：居中 ? space-between：兩端對齊，項目之間的間隔都相等。 ? space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 ul{ overflow: hidden; border: 2px solid purple; width: 1100px; height: 550px; margin: 30px auto; display: flex; /*主軸上的排列方式*/ justify-content: space-between; } #### align-items ? 定義項目在交叉軸上如何對齊。 ? flex-start：交叉軸的起點對齊。 ? flex-end：交叉軸的終點對齊。 ? center：交叉軸的中點對齊。 ? baseline: 項目的第一行文字的基線對齊。 ? stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。 ul{ overflow: hidden; border: 2px solid purple; width: 1100px; height: 550px; margin: 30px auto; display: flex; /*主軸上的排列方式*/ justify-content: space-between; /*元素在交叉軸上的對齊方式*/ align-items: stretch; }  <ul> <li style="height: 200px;">1</li> <li style="height: 300px;">2</li> <li style="height: auto;">3</li> <li style="height: 260px;">4</li> <li style="height: 320px;">5</li> </ul> #### flex-wrap: ? 默認情況下，項目都排在一條線（又稱"軸線"）上。flex- wrap屬性定義，如果一條軸線排不下，如何換行。 ? nowrap（默認）：不換行。 ? wrap：換行，第一行在上方。 ? wrap-reverse：換行，第一行在下方。 eg: ul{ overflow: hidden; border: 2px solid purple; width: 1100px; height: 550px; margin: 30px auto; display: flex; /*主軸上的排列方式*/ justify-content: space-between; /*換行*/ /*如果子元素總寬度大于父級元素寬度,那么就一行能放多少就放多少,放不下的就被擠到下一行*/ /*flex-wrap: wrap-reverse;*/ flex-wrap: wrap; } <body>  <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> #### align-content ? 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 ? flex-start：與交叉軸的起點對齊。 ? flex-end：與交叉軸的終點對齊。 ? center：與交叉軸的中點對齊。 ? space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 ? space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 ? stretch（默認值）：軸線占滿整個交叉軸。 eg: ul{ overflow: hidden; border: 2px solid purple; width: 1100px; height: 550px; margin: 30px auto; display: flex; /*主軸上的排列方式*/ justify-content: space-between; /*換行*/ /*如果子元素總寬度大于父級元素寬度,那么就一行能放多少就放多少,放不下的就被擠到下一行*/ /*flex-wrap: wrap-reverse;*/ flex-wrap: wrap; /*指定多行在交叉軸上的對齊方式*/ align-content: space-around; } <body>  <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> #### order ? 定義項目的排列順序。數值越小，排列越靠前，默認為0 eg: <ul> <li>1</li> <li style="order: 5;">2</li> <li>3</li> <li>4</li> <li>5</li> <li style="order: -5;">6</li> <li>7</li> </ul> #### flex 設置比例： <ul> <li>1</li> <li style="flex: 3;">2</li> <li>3</li> <li>4</li> <li style="flex: 2;">5</li> <li>6</li> <li>7</li> </ul>