web前端开发学习篇 第三章 Flex布局

• Flex布局/弹性布局：

  • 是一种浏览器提倡的布局模型
  • 布局网页更简单、灵活
  • 避免浮动脱标的问题

• Flex布局模型构成

  • 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生

任何一个容器都可以指定为Flex布局

.box{
    display：flex；
}

行内元素

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

属性

1、flex-direction

属性决定主轴的方向（即项目的排列方向）

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2、justify-content

属性修改主轴对齐方式

技巧： 先确定主轴在什么位置，再决定使用哪个

• flex-start : 默认值，起点开始依次排列
• flex-end : 终点开始依次排列
• center : 沿主轴居中排列
• space-around : 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子两侧
• space-between : 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
• space-evenly : 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

3、align-items

调节元素在侧轴的对齐方式

• align-items（添加到弹性容器）
• aling-self : 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
  • flex-start : 默认值，起点开始依次排列
  • flex-end : 终点开始依次排列
  • center : 沿侧轴居中排列
  • stretch : (拉伸)默认值，去掉子级高度，弹性盒子沿着主轴线被拉伸至铺满容器

4、flex

设置弹性盒子的伸缩比

• 语法 ：flex: num;
• 占剩余盒子的num份

5、flex-wrap

实现弹性盒子多行排列的效果

• 语法： flex-wrap: wrap;
• 默认值是 nowrap 不换行

6、align-content

调整行对齐方式

• 取值与justify-content基本相同
• center : 沿主轴居中排列
• space-around : 弹性盒子沿主轴均匀排列， 空白间距均分在弹性盒子两侧
• space-between : 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间