黑马程序员技术交流社区

标题: flex布局 [打印本页]

---

作者: 西柚甜沫沫    时间: 2019-4-16 16:07
标题: flex布局
flex布局
一、父级属性
1、主轴的方向
1》默认x，flex-direction:row;(从右到左row-reverse)
2》垂直y，flex-direction:column;(从下到上column-recerse)
2、是否换行 flex-wrap:””;
1》默认不换 nowrap
2》换行 wrap
3、子元素排列方式 justify-content:””;(先确定是x轴还是y轴)
1》默认 flex-start
2》尾部开始 flex-end
3》居中对齐 center
4》平分剩余空间 space-around
5》贴边，平分 space-between
4、设置侧轴y上子元素排列方式
1》单行：align-items:””;
a、从头开始 flex-start
b、从尾开始 flex-end
c、居中 center
d、拉伸 stretch
2》多行:  align-content:””;(只用于有“换行”情况出现)
a、默认，从头开始排列 flex-start
b、从尾开始排列 flex-end
c、从中间开始排列 center
d、在y轴平分剩余空间 space-around
e、先分布在两头，再平分剩余空间 space-between
f、子元素平分父元素高度 stretch
5、flex-flow复合属性（是flex-direction主轴方向和flex-wrap换行的复合属性）
例： flex-flow:row wrap;
二、子项元素属性
1、flex属性（分配剩余空间，用flex表示占多少份）
2、align-self （自己与其他元素有不一样的对齐方式，控制在侧Y轴排列方式）
3、order属性（定义项目的排列顺序，数值越小，排列越靠前，默认为0，可为负值）

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2