CSS3弹性布局flex

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

这里写图片描述

CSS3 弹性盒子常用属性

属性描述
flex-direction 指定弹性容器中子元素排列方式
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
flex-flow flex-direction 和 flex-wrap 的简写
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式

1. flex-direction 属性
决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

这里写图片描述
属性值

值描述
row 默认值。元素将水平显示，正如一个行一样。
row-reverse 与 row 相同，但是以相反的顺序。
column 元素将垂直显示，正如一个列一样。
column-reverse 与 column 相同，但是以相反的顺序。

2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值描述
nowrap 默认值。规定元素不拆行或不拆列。
wrap 规定元素在必要的时候拆行或拆列。
wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三个值：
（1） nowrap (默认)：不换行。
这里写图片描述
（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3. flex-flow 属性

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值描述
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
baseline 项目位于容器的基线上。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
作者：风起云涌Hal
链接：https://www.jianshu.com/p/5856c4ae91f2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

CSS3 弹性盒子内容

CSS3 弹性盒子常用属性

猜你喜欢