flex 布局
flex布局的优势
1、flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性,非常灵活,让布局的实现更佳多样化,且方便易用。
flex的兼容性
不支持低版本的浏览器(IE9及以下的版本)
概念:弹性盒子、子元素
-
弹性盒子:指的是使用
display:flex
或display:inline-flex
声明的父容器。 -
子元素/弹性元素:指的是父容器里面的子元素们(父容器被声明为 flex 盒子的情况下)。
概念:主轴和侧轴
-
主轴:flex容器的主轴,默认是水平方向,从左向右。
-
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下。
注:主轴和侧轴并不是固定不变的,可以通过 flex-direction
更换方向
弹性盒子
声明定义
使用 display:flex
或 display:inline-flex
声明一个父容器为弹性盒子。
注:display:inline-flex
使用较少。
flex-direction 属性
flex-direction
:用于设置盒子中子元素的排列方向。属性值可以是:
属性值 | 描述 |
---|---|
row | 从左到右水平排列子元素(默认值) |
column | 从上到下垂直排列子元素 |
row-reverse | 从右向左排列子元素 |
column-reverse | 从下到上垂直排列子元素 |
flex-wrap 属性
flex-wrap
:控制子元素溢出时的换行处理。
justify-content 属性
justify-content
:控制子元素在主轴上的排列方式。
弹性元素
justify-content 属性
justify-content: flex-start;
设置子元素在主轴上的对齐方式。属性值可以是:flex-start
从主轴的起点对齐(默认值)flex-end
从主轴的终点对齐center
居中对齐space-around
在父盒子里平分space-between
两端对齐 平分
align-items 属性
align-items
:设置子元素在侧轴上的对齐方式。属性值可以是:
- flex-start
从侧轴开始的方向对齐
- flex-end
从侧轴结束的方向对齐
- baseline
基线 默认同flex-start
- center
中间对齐
- stretch
拉伸(默认值)