Blogger Information
Blog 16
fans 0
comment 0
visits 13210
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性盒子布局——flex
小雨丶
Original
730 people have browsed it
  1. flex中所有元素都是行内块元素
  2. flex中有两条轴,一个主轴,元素的排列方向;
  3. 一个交叉轴,元素的换行方向;

flex容器的属性

  1. flex-flow:主轴方向与换行方式
  2. justify-content:主轴上的对齐方式
  3. align-items:交叉轴上的对齐方式
  4. align-content:在多行容器中的对齐方式

项目属性

  1. flex:缩放比例与基准宽度
  2. align-self:单个项目在交叉轴上的对齐方式
  3. order:项目在主轴上的排列顺序
  4. flexflex-grow flex-shrink flex-basis
  5. flex:放大 收缩 在主轴上的基准宽度
  6. 允许放大收缩:
  7. flex: 1 1 auto;
  8. 不允许放大收缩:
  9. flex: 0 0 auto;
  10. flex:1;//表示的是允许放大收缩
  11. flex:2;//大小是flex:1的2倍
  12. order:0;在order:1;的前边排列,支持负值;
Correcting teacher:天蓬老师天蓬老师

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