Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局术语、容器、项目及案例
Blogger Information
Blog 34
fans 0
comment 0
visits 19979
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局术语、容器、项目及案例
OC的PHP大牛之路
Original
682 people have browsed it

flex布局术语、容器、项目

主轴：元素排列
交叉轴：元素对齐
container可以用作其它元素的容器（块级盒子）
display:flex转为弹性盒子

容器属性：

1.flex-flow主轴方向是否换行
flex-flow：row nowrap主轴方向不允许换行
flex-flow:row wrap主轴方向允许换行

2.place-content容器中的剩余空间在项目中如何分配
2.1将所有项目看成一个整体，剩余空间在项目两边分配
place-content:start将所有剩余空间全部分到右边，所有项目从左边排列
place-content:end将所有剩余空间全部分到左边，所有项目从右边排列
place-content:center将所有剩余空间在项目中左右两边平均分配

2.2将所有项目看成一个独立的个体，剩余空间在项目之间分配
place-content:space-between两端对齐
place-content:space-around分散对齐
place-content:space-evenly平均对齐

3.place-items交叉轴上的对齐
place-items：stretch自动伸展
place-items:start上对齐
place-items:end下对齐

项目属性

1.flex(放大因子 收缩因子 计算宽度)
flex:0 1 auto(flex:initial)默认值
如果flex中自定义width,则flex.width>item.width
如果item设置了min-widtn,则min-width>flex.width>item.width

完全响应式：允许放大 允许缩小 宽度自动
flex:1 1 auto(flex:auto)
flex:1=flewx:1 1 auto(如果省去2，3值，则取默认值)

PC布局：完全失去响应，禁止放大和缩小
flex:0 0 auto(flex:none)

2.order改动项目在主轴上的排列顺序
order：0（默认值），值越小越靠前，支持负数

3.place-self控制某一个项目的对齐方式

案例：

  1. <body>
  2.     <div class="container">
  3.         <div class="item">item1</div>
  4.         <div class="item">item2</div>
  5.         <div class="item">item3</div>
  6.     </div>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container{
  16.           display: flex;
  17.           height: 20em;
  18.           border: 1px solid black ;
  19.         }
  21.         .container>.item{
  22.             width: 10em;
  23.             padding: 1em;
  24.             background-color: aqua;
  25.             border: 1px solid black;
  26.         }
  28.         .container{
  29.             flex-flow:row nowrap
  30.         }
  31.     </style>
  32. </body>

1.flex-flow属性

  1. .container{
  2.             flex-flow:row nowrap
  3.         }

  1. .container{
  2.     flex-flow:row wrap
  3. }

2.place-content属性

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content:start;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: end;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: center;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-between;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-around;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-evenly;
  4. }

3.place-items属性

  1.  .container{
  2.      flex-flow:row nowrap;
  3.      place-items:stretch;
  4.  }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-items:start;
  4. }

  1.  .container{
  2.      flex-flow:row nowrap;
  3.      place-items:end;
  4.  }

4.flex属性

  1. .container>.item{
  2.     /* width: 10em; */
  3.     padding: 1em;
  4.     background-color: aqua;
  5.     border: 1px solid black;
  6.     flex:auto;
  7. }

5.order属性

  1.  .container>.item:first-of-type{
  2.      background-color: blue;
  3.      order: 2;
  4.  }

6.place-self属性

  1. .container>.item:first-of-type{
  2.     background-color: blue;
  3.     order: 2;
  4.     place-self: start;
  5. }

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post