flex布局看这一篇就够了

Flex 又被成为"弹性布局"，任何一个容器都可以被指定为 Flex 布局，在如今的页面布局中，flex起到至关重要的作用

 

1.flex布局 概念 

被定义为 flex的元素被称为 “flex容器” ， 而容器里面的元素 被称为 “flex项目”

flex容器存在两根轴 - 水平的主轴 和 垂直的交叉轴

2.flex 属性的申明

<div class="box">
 <div class="one">我是第一个’div‘</div>
 <div class="two">我是第二个’div‘</div>
</div>

//使用 display 属性来申明该元素的布局属性
.box{
  display:flex | inline-flex;
}

3.flex容器属性

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

3-1.flex-direction属性 - 决定主轴的方向

1. row：主轴为水平方向，flex项目 从左往右 排列
2. row-reverse：主轴为水平方向，flex项目 从右往左 排列
3. column：主轴为垂直方向，flex项目 从上往下 排列
4. column-reverse：主轴为垂直方向，flex项目 从下往上 排列

3-2.flex-wrap属性 - flex项目超出主轴轴线，flex项目如何排

1. nowrap：不换行
2. wrap：换行  ‘多上少下’
3. wrap-reverse：换行 ‘多下少上’

3-3.justify-content属性 - flex项目在主轴方向的对齐方式

1. flex-start：左对齐
2. flex-end：右对齐
3. center： 居中对其
4. space-between：两端对齐（各个flex项目之间的间隔都相等）
5. space-around：每个flex项目两侧的间距相等

 

3-4.align-items属性 - flex项目在交叉轴方向的对齐方式

1. stretch：如果项目没有高度或设为auto，将自动填充高度
2. flex-start：交叉轴的起点对齐
3. flex-end：交叉轴的终点对齐
4. center：居中对齐
5. baseline: 项目的第一行文字的基线对齐

3-5.align-content属性 - 轴线的对齐方式（在一根轴线的时候不起作用）

1. stretch：轴线占满整个交叉轴
2. flex-start：交叉轴的起点对齐
3. flex-end：交叉轴的终点对齐
4. center：居中对齐
5. space-between：与交叉轴两端对齐，轴线之间的间距均分
6. space-around：每根轴线两侧的间距都相等

4.flex项目属性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

4-1.order属性 - flex项目的排列顺序 (数值越小，位置越靠前，默认为0)

.box{
  display:flex;
}
.one{
 order: 1;
}
.two{
 order: 1;
}

4-2.flex-grow属性 - flex项目所占空间的比例（默认为0） - 可参考栅栏布局

.box{
  display:flex;
}
.one{
 flex-grow: 1;
}
.two{
 flex-grow: 1;
}

//如果所有flex项目的flex-grow属性都为1，则它们将等分剩余空间。
//如果其中有一个flex项目的flex-grow属性为2，其他flex项目都为1，那么2所占据的剩余空间将比其他项多一倍。

4-3.flex-shrink属性 - flex项目的收缩比例（默认为0） - 可参考栅栏布局

.box{
  display:flex;
}
.one{
 flex-shrink: 0;
}
.two{
 flex-shrink: 0;
}

//如果所有flex项目的flex-shrink属性都为1，那么当flex容器空间不足时，将会等比缩小
//如果该属性值为0，其他属性值为1，那么为0的那个项目不改变大小，其他为1的等比收缩

4-4.flex-basis属性 - 设定该容器主轴的空间大小（默认为 auto）

4-5.flex属性 - flex-grow, flex-shrink 和 flex-basis的组合

该属性有两个推荐值：auto (1 1 auto) 和 none (0 0 auto)

4-6.align-self属性 - 允许单个flex项目有与flex其他项目不同的对齐方式

可以覆盖原来的align-items属性，也可以继承父元素的align-items属性 ， 如果没有父元素 ，默认stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;
// 默认 | 轴头部对齐 | 轴尾部对齐 | 中部对齐 | flex项目第一行文字的底部对齐 | 当flex项目未设置高度时，flex项目将和flex容器等高对齐 

 

欢迎关注我的公众号：码上学习鸭