CSS-Flex 布局

CSS-Flex 布局

学习目标

能够说出布局原理
能够使用常用属性
- 父项
- 子项

概念

2009 年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

Flex布局将成为未来布局的首选方案

传统布局与flex布局的区别：

传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端有很好的布局
flex弹性布局
- 操作方便，布局极为简单，移动端应用广泛
- PC 端浏览器支持较差
- IE11或更低版本，不支持或仅部分支持

学习资料：

https://www.bilibili.com/video/BV1N54y1i7dG?p=2&spm_id_from=pageDriver

常用属性

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

display: flex

父元素定义时可以使子元素行内元素如span拥有大小并按照浮动的形式排列，此操作节省浮动清除

2.Flex布局 - 图1

等分

利用子元素里设置flex: 1可以设置一等分、二等分，三等分等

justify-content

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

展示效果：

2.Flex布局 - 图2

布局原理

flex box即弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当为父盒子设为flex布局后，子元素的float, clear, vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容器，它所有子元素自动称为容器的成员，称为flex项目

如div就是flex父容器
如span就是子容器flex项目
子容器可以横向排列也可以纵向排列

总结：

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父项属性

以下由 6 个属性对父元素设置的：

flex-direction：设置主轴方向
- flex-direction: row;：默认从左到右
- flex-direction: row-reverse;：从右到左
- flex-direction: column;：从上到下
- flex-direction: column-reverse;：从下到上
justify-content：设置主轴上的子元素排列方式
- justify-content: flex-start; ：默认值从头部开始，如果主轴x轴，则从左到右
- justify-content: flex-end; ：从尾部部开始排列
- justify-content: center; ：从主轴剧中对齐(如果主轴是x轴则水平居中)
- justify-content: space-around; ：平分剩余空间
- justify-content: space-between; ：先两边贴边再平分剩余空间
flex-wrap：设置子元素是否换行
- flex-wrap: nowrap;：默认情况不换行，缩小子元素宽度硬塞
- flex-wrap: wrap;：换行
align-content：设置侧轴上的子元素的排列方式(多行)
align-items：设置侧轴上的子元素排列方式(单行)
- align-items: flex-start;：侧轴默认从上到下
- align-items: flex-end;：侧轴从下到上
- align-items: center;：侧轴居中(垂直居中)
- align-items: stretch;：侧轴拉伸
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
- flex-direction: column; flex-wrap: wrap;相当于flex-flow: column wrap;