flex布局笔记整理

目标： 能够使用Flex布局模型灵活、快速的开发网页（对低版本浏览器不支持）

Flex布局/弹性布局：

• 是一种浏览器提倡的布局模型

• 布局网页更简单、灵活

• 避免浮动脱标的问题
  

  作用 ：

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

• Flex布局非常适合结构化布局
  

  设置方式 ：

  父元素添加 display: flex，子元素可以自动的挤压或拉伸
  

  组成部分 ：

• 弹性容器

• 弹性盒子

• 主轴

• 侧轴 / 交叉轴

 .box {
            /* 视觉效果: 子级一行排列/水平排列 */
            /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
            display: flex;
            height: 200px;
            border: 1px solid #000;
        }

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

• align-items（添加到弹性容器）
• align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

伸缩比

目标：使用flex属性修改弹性盒子伸缩比
属性

• flex : 值;

取值分类

• 数值(整数)

注意 : 只占用父盒子剩余尺寸

主轴方向

目标：使用flex-direction改变元素排列方向
思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
答：水平方向。
思考：如何实现内容垂直排列？
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

justify-content:center和align-items:center;

.box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列  此时主轴为垂直方向，通俗来说变成了侧轴，所以要实现
                        水平居中就要用align-items: center;垂直居中要用justify-content:             center;*/
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 垂直居中 */
            justify-content: center;


            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果
思考：默认情况下，多个弹性盒子如何显示？
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同（没有space-evenly）