CSS中flex的用法( 学习笔记 )

flex( 弹性盒、伸缩盒 )

---

flex 的介绍

• flex是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以随页面的大小的改变而改变

弹性容器

1. 要使用弹性盒，必须先将一个元素设置为弹性容器
2. 我们通过 display 来设置弹性容器
3. display:flex 设置为块级弹性容器（常用）
4. deplay:inline-flex 设置为行内的弹性容器

弹性元素

1. 弹性容器的直接子元素( 非后代 )是弹性元素（弹性项）
2. 弹性元素可以同时是弹性容器

---

弹性容器的属性

一、flex-direction

• flex-direction 指定容器中弹性元素的排列方式
• 可选值：

1. row 默认值，弹性元素在容器中水平排列（从左向右） row-reverse
2. 弹性元素在容器中反向水平排列（从右向左）
3. column 弹性元素纵向排列（从上向下）
4. column-reverse 弹性元素纵向排列（从下向上）

• 主轴：弹性元素的排列方向称为主轴
• 侧轴：与主轴垂直方向的称为侧轴

---

二、flex-grow（弹性元素的增长系数）

• flex-grow 指定弹性元素的伸展的系数
• 当父元素有多余空间的时候，子元素如何伸展
• 父元素的剩余空间，会按照比例进行分配
• 例子：flex-grow: 1; 默认值0时不伸展

---

三、flex-shrink（弹性元素的缩减系数）

• flex-shrink 指定弹性元素的收缩系数
• 当父元素中的空间不足以容纳所有子元素时，对子元素进行收缩

---

四、flex-wrap

• 设置弹性元素是否在弹性容器里自动换行
• 可选值： nowrap 默认值，元素不会自动换行
• wrap 元素沿着辅轴方向自动换行
• wrap-reverse 元素沿着辅轴反方向换行
• flex-flow：wrap 和 direction 的简写属性

---

五、justify-conten

• 分配主轴上的空白空间（主轴上的元素如何排列）
• 可选值：

1. flex-start 元素沿着主轴起边排列
2. flex-end 元素沿着主轴终边排列
3. center 元素居中排列
4. space-around 空白分布到元素两侧
5. space-between 空白均匀分布到元素间
6. space-evenly 空白分布到元素的单侧

• 注意：有 justify 的代表元素在主轴上的排列

---

六、align-items

• 元素在辅轴上如何对齐
• 元素与元素间的关系
• 可选值： stretch 默认值，将元素的长度设置为相同的值
• flex-start 元素不会拉伸，沿着辅轴起边对齐
• flex-end 元素不会拉伸，沿着辅轴终边对齐
• center 居中对齐
• baseline 基线对齐

---

七、align- content

• 分配辅轴上的空白空间
• 可选值：

1. flex-start 元素沿着主轴起边排列
2. flex-end 元素沿着主轴终边排列
3. center 元素居中排列
4. space-around 空白分布到元素两侧
5. space-between 空白均匀分布到元素间
6. space-evenly 空白分布到元素的单侧

• 注意：有 align 的代表元素在辅轴上的排列

---

八、align-self

• 用来覆盖弹性元素上的align-items

---

九、flex-basis

• 指定的是元素在主轴上的基础长度
• 如果主轴是横向的 则 该值指定的就是元素的高度
• 如果主轴是纵向的 则 该值指定的就是元素的宽度
• 默认值是 auto ，表示参考元素自身的高度或宽度
• 如果传递了一个具体的数值，则以该值为准

---

十、order

• 设置弹性元素的排列顺序
• 例子：order: 1; 弹性元素排第一个

---

总结：

• flex可以设置弹性元素所有的三个样式：
• flex 增长 缩减 基础；
• 可选值：

1. initial “flex: 0 1 auto;”
2. auto “flex: 1 1 auto;”
3. none "flex: 0 0 auto"弹性元素没有弹性

---

w3school导航栏实例：

    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>

    .nav{
        width: 1210px;
        height: 48px;
        line-height: 48px;
        background-color: #E8E7E3;
        margin: 50px auto;
        margin-top: 100px;
        list-style: none;
        display: flex;
        padding-left: 0;
    }
    .nav li{
        flex-grow: 1;
    }
    .nav a{
        display: block;
        color: #808080;
        text-decoration: none;
        font-size: 18px;
        text-align: center
    }
    .nav a:hover{
        color: #fff;
        background-color: #636363;
    }