第六课：Flex 布局

1.flex之前如何布局
normal flow(正常流，也叫文档流) 内联元素从左到右排列 块级元素从上到下排列
float + clear
position relative + absolute
display inline-block
负 margin

D3D69F39-ACE5-4912-95F2-FC0EC952498D.png

2.flex来了

一种新的布局方式 Flex布局
1.块级布局侧重垂直方向 行内布局侧重水平方向 flex布局与方向无关的
2.flex 布局可以实现空间自动分配 自动对齐
3.flex 适用于简单的线性布局 更复杂的布局要交给grid布局

3.基本概念
主轴
侧轴
主尺寸
侧尺寸
主轴起点
主轴终点
侧轴起点
侧轴终点

13255CD0-B548-433A-9268-15E64D50EB4B.png

子元素：flex item
父元素：flex container
align-items （处理子元素的）

4.flex container的六个属性
flex-direction 方向
flex-wrap 换行
flex-flow 上面两个的简写
justify-content 主轴方向对齐方式
align-items 侧轴对齐方式
align-content 多行/列内容对齐方式(用的较少)

主轴由方向决定

flex-direction: row              从左往右
flex-direction: row-reverse 从右往左
flex-direction: column         从上到下
flex-direction: column-reverse 从下到上

flex-wrap: wrap
flex-wrap: nowrap

flex-flow: row nowrap   上面两个的简写

justify-content: space-between  把空间放在中间
justify-content: space-around    把空间放周围
justify-content: flex-start            都往起点靠
justify-content: flex-end             都往起点靠
justify-content: center                放中间

align-items: stretch           所有元素伸开 和最高的元素一样高
align-items: flex-start        所有元素往侧轴起点靠
align-items: flex-end         所有元素往侧轴终点靠
align-items: center            所有元素往侧轴中间靠
align-items: baseline

align-content:   多行/列内容对齐方式

5.flex item的六个属性

flex-grow    增长比例(空间过多时)
flex-shrink  收缩比例(空间不够时)
flex-basis   默认大小(一般不用)
flex            上面三个的缩写
order          顺序(代替双飞翼)
align-self    自身的对齐方式

http://js.jirengu.com/pepopeleka/1/edit

6.例子

手机页面布局 topbar + main + tabs
http://js.jirengu.com/pepopeleka/1/edit?html,css,output

产品列表
http://js.jirengu.com/lepovuluye/1/edit?html,css,output

PC页面布局
http://js.jirengu.com/pevesexife/1/edit

完美居中
http://js.jirengu.com/zibagixiza/1/edit

7.参考

http://js.jirengu.com/micukolove/1/edit

1.png 2.png 3.png