Web应用课 2.4 CSS——flex、响应式布局

flex布局

主轴方向 flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

/* 文本排成行的方向 */
flex-direction: row;

/* 类似于 <row>，但方向相反 */
flex-direction: row-reverse;

/* 文本排成列的方向 */
flex-direction: column;

/* 类似于 <column>，但方向相反 */
flex-direction: column-reverse;

/* 全局值 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

是否换行 flex-wrap

CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

flex-wrap: nowrap; /*单行 Default value */
flex-wrap: wrap;/*多行*/
flex-wrap: wrap-reverse;/*从下往上多行显示*/

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;

摆放顺序 flex-flow

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。

主轴对齐方式 justify-content

/* Positional alignment */
justify-content: center; /* 水平居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

交叉轴竖向对齐方式 align-items

它控制子元素在交叉轴上的对齐。

• flex-start：元素向主轴起点对齐。
• flex-end：元素向主轴终点对齐。
• center：元素竖直居中。
• stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

align-content

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

• flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
• flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
• center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
• stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

案例：实现水平和竖直居中

.div-flex{
    width: 50%;
    height: 500px;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*元素水平居中*/
    align-items: center;/*元素竖直居中*/
    text-align: center;/*文字水平居中*/
}

order 顺序

定义flex项目的顺序，值越小越靠前。

案例：让奇数块排在偶数块的前面

.div-flex-item{
    width: 100px;
    height: 100px;

}

.div-flex-item:nth-child(odd){
    background-color: lightpink;
    order: 1;
}

.div-flex-item:nth-child(even){
    background-color: lightgreen;
    order: 2;
}

flex-grow 拉伸

CSS 属性 flex-grow CSS 设置 flex 项主尺寸 的 flex 增长系数。
负值无效，默认为 0。

flex-shrink 缩小

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
负值无效，默认为1。

flex-basis 初始宽度

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。
取值：
width 值可以是length; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

flex三属性缩写 flex-grow、flex-shrink、flex-basis的缩写

常用取值：

auto：flex: 1 1 auto /*随着父元素自动延伸和缩小*/
none：flex: 0 0 auto /*不延伸也不缩小*/

响应式布局 适应不同设备屏幕，如手机，平板，电脑

media查询 当屏幕宽度满足特定条件时应用css

@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

示例：屏幕宽度大于768显示青色，否则显示紫色

/*大于768的屏幕认为宽屏，小于认为small*/
@media (min-width: 768px){
    .card{
        background-color: aquamarine;/*大于768的屏幕显示青色，小于显示紫色*/
    }
}

示例：栅格化布局