CSS Day12-flex布局

12.1 伸缩容器和项目

传统布局方式：display+position+float

flex布局：display:flex; ---开启弹性盒子

伸缩盒模型：

• 任意布局

• 必须先开启在父元素内的盒模型

• 需要有容器(父元素)和项目(子元素)

• 开启后，子元素变成行内块，不会脱离标准文档流

12.2 主轴侧轴方向

• 主轴：x轴    侧轴：y轴

  flex-direction: row; /* 默认 */ 主轴方向从左到右水平排列，主轴是x轴

  flex-direction: row-reverse; 主轴方向从右到左说平排列，主轴是x轴

  flex-direction: column; 主轴方向从上到下依此排列，主轴是y轴

12.3 主轴方向换行方式

• flex-wrap: nowrap; /* 默认值 */ 不换行

  特点：子元素超出父元素的宽，子元素会在主轴方向上的宽自动缩小来容下其他元素；

  子元素中的内容超出，内容会溢出盒子

• flex-wrap: wrap; 换行

  特点：子元素超出父元素的宽，会自动换行

12.4 主轴的子元素对齐方式

• justify-content: ;

  flex-start 主轴起点对齐 默认值

  flex-end 主轴终点对齐

  属性值： center 水平居中对齐

  space-between 均匀分布，两端对齐

  space-around 均匀分布，两端距离是中间距离的一半

  space-evenly 均匀分布，两端距离与中间距离一致

12.5 侧轴的对齐方式

• align-items: ; (一行对齐)

  flex-start 侧轴起点对齐 默认值

  flex-end 侧轴终点对齐

  属性值： center 水平居中对齐

  space-between 均匀分布，两端对齐

  space-around 均匀分布，两端距离是中间距离的一半

  space-evenly 均匀分布，两端距离与中间距离一致

• align-content: ; (多行对齐)

  flex-start 侧轴的起点对齐

  flex-end 侧轴的终点对齐

  属性值： center 侧轴的居中对齐 常用

  baseline 项目的第一行文字的基线对齐

  stretch 如果项目未设置高度，将占满整个容器的高度 默认值

  space-around 项目之间的距离相等，比边缘的距离大一倍

  space-between 与侧轴两端对齐，中间平均分布

  space-evenly 在侧轴方向完全平分

12.6 基准长度

flex-basis 基准长度,设置伸缩项目在主轴的基准长度，如果主轴是水平方向，它改变的就是宽，如果主轴是垂直方向，它改变的就是高。

auto默认值，浏览器会根据flex-basis的值来去改变项目的宽高（前提是父容器有富裕空间）

12.7 单独对齐方式

align-self 可以单独设置某个项目在侧轴上的对齐方式

auto 默认值 根据侧轴对齐方式属性进行排列

属性值：center start end

space-around

space-between

space-evenly

12.8 伸缩项目的放大比例

flex-grow：；

默认值是0 父元素有剩余空间也不会被占据

属性值为1 子元素按比例平分剩余空间

案例

    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6