CSS高级布局:Flexbox布局完全指南

2021年3月28日16:13:38 发表评论 491 次浏览

它也被称为弹性盒子模型。它基本上是一个布局模型,提供了一种简单而干净的方式来安排容器内的项目。Flexbox不同于垂直偏置的块型和水平偏置的直列型。Flexbox是为小规模布局而创建的,还有另一个标准叫做grid,它更倾向于大规模布局,它的工作方式类似于Twitter bootstrap grid系统的工作方式。flex响应灵敏,移动友好。要使用flex,首先创建一个flex容器。若要创建flex容器,请将display属性设置为flex。

例子:

.main-container {
  display: flex;
}

弹性属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction:flex-direction用于定义弹性物品的方向。在flexbox中, 默认轴为水平轴, 因此项目将排成一行。

语法如下:

// Stacking flex items column wise
flex-direction: column;

// Stacking flex items from bottom to top
flex-direction: column-reverse;

// Stacking flex items row wise
flex-direction: row;

// Stacking flex items from right to left
flex-direction: row-reverse;

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >flexbox</ title >
         < style >
             .gfg_flex {
                 display: flex;
                 flex-direction: row;
                 background-color: green;
                 text-align:center;
             }
              
             .gfg_flex > div {
                 background-color: #f4f4f4;
                 width: 100px;
                 height:100px;
                 margin: 10px;
                 font-size: 40px;
             }
             h2 {
                 text-align:center;
             }
             .geeks {
                 font-size:40px;
                 text-align:center;
                 color:#009900;
                 font-weight:bold;
             }
         </ style >
     </ head >
     < body >
         < div class = "geeks" >lsbin</ div >
         < h2 >flex-direction Property</ h2 >
         < div class = "gfg_flex" >
             < div >Box A</ div >
             < div >Box B</ div >
             < div >Box C</ div > 
             < div >Box D</ div >
             < div >Box E</ div > 
         </ div >
     </ body >
</ html >

输出如下:

flex-direction属性

flex-wrap:flex-wrap属性用于定义flex-item的包装。如果将flex-wrap属性设置为wrap, 则在浏览器的窗口中设置该框。如果浏览器窗口小于元素, 则元素下降到下一行。

语法如下:

// Wrap flex items when necessary
flex-wrap: wrap;

// Flex items will not wrap
flex-wrap: nowrap;

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >flex-wrap property</ title >
         < style >
             .gfg_flex {
                 display: flex;
                 flex-wrap: wrap;
                 text-align:center;
                 background-color: green;
             }
              
             .gfg_flex > div {
                 background-color: #f4f4f4;
                 width: 100px;
                 height:100px;
                 margin: 10px;
                 font-size: 40px;
             }
             h2 {
                 text-align:center;
             }
             .geeks {
                 font-size:40px;
                 text-align:center;
                 color:#009900;
                 font-weight:bold;
             }           
         </ style >
     </ head >
     < body >
         < div class = "geeks" >lsbin</ div >
         < h2 >flex-wrap Property</ h2 >
         < div class = "gfg_flex" >
             < div >Box A</ div >
             < div >Box B</ div >
             < div >Box C</ div > 
             < div >Box D</ div >
             < div >Box E</ div >
             < div >Box F</ div > 
             < div >Box G</ div >
             < div >Box H</ div >
             < div >Box I</ div > 
         </ div >
     </ body >
</ html >

输出如下:

flex-wrap属性

注意:

flex-flow是flex-direction和flex-wrap的简写。

语法如下:

flex-flow: row wrap;

justify-content:justify-content属性用于根据flexbox容器内的主轴对齐flex项目。

语法如下:

// Aligns the flex items at the center
justify-content: center;

// The space is distributed around the flexbox items
//and it also adds space before the first item and after the last one.
justify-content: space-around;

// Space between the lines
justify-content: space-between;

// Aligns the flex items at the beginning of the container
justify-content: flex-start;

// Aligns the flex items at the end of the container
justify-content: flex-end;

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >justify flexbox property</ title >
         < style >
             .flex1 {
                 display: flex;
                 justify-content: center;
                 background-color: green;
             }
              
             .flex2 {
                 display: flex;
                 justify-content: space-around;
                 background-color: green;
             }
              
             .flex3 {
                 display: flex;
                 justify-content: space-between;
                 background-color: green;
             }
              
             .flex4 {
                 display: flex;
                 justify-content: flex-start;
                 background-color: green;
             }
              
             .flex5 {
                 display: flex;
                 justify-content: flex-end;
                 background-color: green;
             }
              
             .flex-items {
                 background-color: #f4f4f4;
                 width: 100px;
                 height:50px;
                 margin: 10px;
                 text-align: center;
                 font-size: 40px;
             }
             h2 {
                 text-align:center;
             }
             .geeks {
                 font-size:40px;
                 text-align:center;
                 color:#009900;
                 font-weight:bold;
             }                       
         </ style >
     </ head >
     < body >
         < div class = "geeks" >lsbin</ div >
         < h2 >The justify-content Property</ h2 >
         < b >justify-content: center </ b >
         < div class = "flex1" >
             < div class = "flex-items" >1</ div >
             < div class = "flex-items" >2</ div >
             < div class = "flex-items" >3</ div > 
         </ div >
         < br >
         < b >justify-content: space-around </ b >
         < div class = "flex2" >
             < div class = "flex-items" >1</ div >
             < div class = "flex-items" >2</ div >
             < div class = "flex-items" >3</ div > 
         </ div >
         < br >
         < b >justify-content: space-between </ b >
         < div class = "flex3" >
             < div class = "flex-items" >1</ div >
             < div class = "flex-items" >2</ div >
             < div class = "flex-items" >3</ div > 
         </ div >
         < br >
         < b >justify-content: flex-start </ b >
         < div class = "flex4" >
             < div class = "flex-items" >1</ div >
             < div class = "flex-items" >2</ div >
             < div class = "flex-items" >3</ div > 
         </ div >
         < br >
         < b >justify-content: flex-end </ b >
         < div class = "flex5" >
             < div class = "flex-items" >1</ div >
             < div class = "flex-items" >2</ div >
             < div class = "flex-items" >3</ div > 
         </ div >
     </ body >
</ html >

输出如下:

justify-content属性

align-items:此属性用于根据交叉轴垂直对齐弹性项目。

语法如下:

// Aligns the flex items in the middle of the container
align-items: center;

// Flexbox items are aligned at the baseline of the cross axis
align-items: baseline;

// Stretches the flex items
 align-items: stretch;

// Aligns the flex items at the top of the container
align-items: flex-start;

// Aligns elements at the bottom of the container
align-items: flex-end;

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >align-items property</ title >
         < style >
             .flex1 {
                 display: flex;
                 height: 200px;
                 align-items: center;
                 background-color: green;
             }
              
             .flex2 {
                 display: flex;
                 height: 200px;
                 align-items: baseline;
                 background-color: green;
                 }
              
             .flex3 {
                 display: flex;
                 height: 200px;
                 align-items: stretch;
                 background-color: green;
             }
              
             .flex4 {
                 display: flex;
                 height: 200px;
                 align-items: flex-start;
                 background-color: green;
             }
              
             .flex5 {
                 display: flex;
                 height: 200px;
                 align-items: flex-end;
                 background-color: green;
             }
              
             .flex-items {
                 background-color: #f4f4f4;
                 width: 100px;
                 margin: 10px;
                 text-align: center;
                 font-size: 50px;
             }
             h2 {
                 text-align:center;
             }
             .geeks {
                 font-size:40px;
                 text-align:center;
                 color:#009900;
                 font-weight:bold;
             }        
         </ style >
     </ head >
     < body >
     < div class = "geeks" >lsbin</ div >
     < h2 >The align-items Property</ h2 >
     < b >align-items: center </ b >
     < div class = "flex1" >
         < div class = "flex-items" >1</ div >
         < div class = "flex-items" >2</ div >
         < div class = "flex-items" >3</ div > 
     </ div >
     < br >
     < b >align-items: baseline </ b >
     < div class = "flex2" >
         < div class = "flex-items" >1</ div >
         < div class = "flex-items" >2</ div >
         < div class = "flex-items" >3</ div > 
     </ div >
     < br >
     < b >align-items: stretch </ b >
     < div class = "flex3" >
         < div class = "flex-items" >1</ div >
         < div class = "flex-items" >2</ div >
         < div class = "flex-items" >3</ div > 
     </ div >
     < br >
     < b >align-items: flex-start </ b >
     < div class = "flex4" >
         < div class = "flex-items" >1</ div >
         < div class = "flex-items" >2</ div >
         < div class = "flex-items" >3</ div > 
     </ div >
     < br >
     < b >align-items: flex-end </ b >
     < div class = "flex5" >
         < div class = "flex-items" >1</ div >
         < div class = "flex-items" >2</ div >
         < div class = "flex-items" >3</ div > 
     </ div >
     </ body >
</ html >

输出如下:

对齐项目属性

align-content:此属性定义了flexbox中每个flex行的对齐方式, 并且仅在应用flex-wrap:wrap时, 即存在多行flexbox项目时才适用。

语法如下 :

// Displays the flex lines with equal space between them
align-content: space-between;

// Displays the flex lines at the start of the container
align-content: flex-start;

// Displays the flex lines at the end of the container
 align-content: flex-end;

// Dy using space-around property space will be 
// Distributed equally around the flex lines
align-content: space-around;

// Stretches the flex lines
align-content: stretch;

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >align-content property</ title >
         < style >
             .main-container {
                 display: flex;
                 height: 400px;
                 flex-wrap: wrap;
                 align-content: space-between;
                 background-color: green;
             }
              
             .main-container div {
                 background-color: #f4f4f4;
                 width: 100px;
                 margin: 10px;
                 text-align: center;
                 font-size: 50px;
             }
             h2 {
                 text-align:center;
             }
             .geeks {
                 font-size:40px;
                 text-align:center;
                 color:#009900;
                 font-weight:bold;
             }    
         </ style >
     </ head >
     < body >
         < div class = "geeks" >lsbin</ div >
         < h2 >The align-content Property</ h2 >
         < div class = "main-container" >
             < div >1</ div >
             < div >2</ div >
             < div >3</ div > 
             < div >4</ div >
             < div >5</ div >
             < div >6</ div > 
             < div >7</ div >
             < div >8</ div >
             < div >9</ div > 
             < div >10</ div >
         </ div >
     </ body >
</ html >

输出如下:

对齐内容属性

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: