CSS深入浅出-Flex布局

Flex之前的布局

在使用Flex布局前
我们主要使用以下五点作布局的

• normal flow(正常流，也叫文档流)
  内联元素从左到右，块级元素从上到下
• float + clear
  浮动+清除浮动
• position relative + absolute
  相对定位+绝对定位
• display : inline-block
  做横向布局，例子：导航栏
• 负 margin
  小技巧，可以用来产生位移

Flex布局

一种新的布局方式，大概是在CSS3到来时出现的

特点

1. 块级布局侧重垂直方向，行内布局侧重水平方向。
   flex布局是与方向无关的

2. flex布局可以实现空间自动分配，元素自动对齐
   flexible更加弹性，灵活

3. flex适用于简单的线性布局，更复杂的布局要交给grid布局

使用方式

• 给父元素加上一个display : flex;
• 给父元素和子元素添加属性

基本概念

flex布局

• 主尺寸：main size
• 侧尺寸：cross size
• 主轴：main axis
  • 主轴起点：main start
  • 主轴终点：main end
• 侧轴：cross axis
  • 侧轴起点：cross start
  • 侧轴终点：cross end
• 所有里面的子元素(项)：flex item
• 外面的父元素(容器)：flex container

“flex container”(容器)的属性和值

• "flex-direction" 方向

"row"(默认值)：从左到右放在一行内显示
"row-reverse"：反向放在一行内显示
"column"：从上往下每个占一行排列
"column-reverse"：反向每个占一行排列
"initial"：设置该属性为它的默认值
"inherit"：从父元素继承属性

• "flex-wrap" 换行

"nowrap"(默认值)：不换行
"wrap"：换行
"wrap-reverse"：反向换行

• "flex-flow" 方向&换行简写

flex-flow : 方向 换行 ;

• "justify-content" 主轴方向对齐方式

"space-between"：把空间平均分配在几个"flex item"之间
"space-around"：把空间平均分配到几个"flex item"周围
"flex-start"："flex item"都往主轴起点靠
"flex-end"："flex item"都往主轴终点靠
"center"："flex item"都往主轴中间靠

• "align-items" 侧轴方向对齐方式

"stretch"(默认值)：高度不写死情况下，把所有元素伸展开，和最高的元素一样高
"baseline"：文字的"baseline"对齐
"flex-start"："flex item"都往侧轴起点靠
"flex-end"："flex item"都往侧轴终点靠
"center"："flex item"都往侧轴中间靠

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

"stretch"(默认值)：通常意义上的平均分配方案
"space-between"：把空间放在行与行之间
"space-around"：把空间分配到行与行两边
"flex-start"："flex item"都往侧轴起点靠
"flex-end"："flex item"都往侧轴终点靠

“flex item”(项)的属性和值

• "flex-grow" 增长比例(空间过多时)

flex-grow: 1 ;

每个项都能写，按写的比例分配空间

• "flex-shrink" 收缩比例(空间不足时)

flex-shrink: 1 ;

每个项都能写，按写的比例收缩项

• "flex-basis" 默认大小

flex-basis: 300px ;

每个项都能写，让项变成写的大小

• "flex" 增长比例&收缩比例&默认大小(缩写)

flex: 1 2 200px;

• "order" 项的顺序(代替双飞翼)

order: 1 ;

每个项(可以)都写，按写的的顺序排列

• "align-self" 项的对齐方式

当主轴之类的对齐时，可以改变项的对齐方式来突出

友情链接

1. 文字教程：阮一峰
2. Flex测试游戏:
   • Flexbox青蛙
   • Flexbox塔防