css-flex

yyscc
42 阅读5分钟

基本概念

  1. 采用 flex 布局的元素称为 容器 ，它的所有子元素叫做容器成员，也叫做 flex 项目

  2. flex 容器存在两个主轴：

    1. 水平的主轴（main axis）；子元素默认沿主轴方向排列
    2. 垂直的交叉轴（cross axis）

容器和主轴、交叉轴如图所示：

Flex 容器

容器和子项目的属性总览

属性值描述属性类型
displayflex -> 块级 flex容器
inline-flex -> 行内 flex 容器		指定 HTML 元素的弹性盒子类型容器属性
flex-directionrow -> 默认值，主轴方向从左到右
row-reverse -> 主轴方向从右到左
column -> 主轴方向从上到下
column-revrese -> 主轴方向从下到上
intial -> 属性值为默认值
row inherit -> 从父元素继承此属性		指定弹性盒子中子元素的排列方式容器属性
flex-wrapnowarp -> 默认值，子项目不会换行
warp -> 子项目在需要时换行
warp-reverse -> 子项目在需要时会换行，但会以相反的顺序
intial -> 此属性将设置为默认值
inherit -> 从父元素继承属性值		设置当子元素超出弹性盒子时是否换行容器属性
flex-flowflex-direction flex-warpflex-direction 和 flex-warp 两个属性的简写容器属性
justify-contentflex-start -> 默认值，左对齐
flex-end -> 右对齐
center -> 居中
space-between -> 两端对齐，项目之间的间隔相等
space-around -> 每个项目两侧的间隔相等
initial -> 将此属性设置为属性的默认值
inherit -> 从父元素继承属性的值		设置弹性盒子中子元素在主轴方向上的对齐方式容器属性
align-itemsstretch -> 默认值，项目将被拉伸以适应容器
center -> 项目位于容器的中央
flex-start -> 项目位于容器的顶部
flex-end -> 项目位于容器的底部
baseline -> 项目与容器的基线对齐
inital -> 将此属性设置为属性的默认值
inherit -> 从父元素继承属性的值		设置弹性盒子中子元素在交叉轴方向的对齐方式容器属性
align-content值与 align-items 相同在弹性盒的侧轴还有多余空间时调整容器内项目的对齐方式容器属性
orderNumber设置弹性盒子中子元素的排列顺序项目属性
align-selfauto -> 默认值，将继承父容器的
align-items 属性值，如果父元素没有，则为 stretch
stretch -> 项目将被拉伸以适应容器
center -> 项目位于容器的中央
flex-start -> 项目位于容器的顶部
flex-end -> 项目位于容器的底部
baseline -> 项目与容器的基线对齐
initial -> 将此属性设置为属性的默认值
inherit -> 从父元素继承属性值		在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性项目属性
flex-grow一个数字，用来设置项目相对于其他项目的增长量，默认值为 0设置弹性盒子的扩展比率项目属性
flex-shrink一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1设置弹性盒子的收缩比例项目属性
flex-basis项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。设置弹性盒子伸缩基准项目属性
flexflex-grow flex-shrink flex-basis 属性的缩写
flex: 1 => flex: 1 1 auto
flex: none => flex: 0 0 auto		设置弹性盒子中子元素如何分配空间项目属性

容器属性效果演示

flex-direction

作用：flex-direction 属性用来决定主轴的方向（即项目的排列方向）

flex-direction 属性演示

flex-warp

作用：flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

flex-wrap 属性演示

flex-flow

作用：flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex_flow {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .flex_flow div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="flex_flow">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
    </div>
</body>
</html>

运行结果如下：

image.png

justify-content

作用：justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

image.png

 align-items

作用：align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式

image.png

align-content

作用：align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式

image.png

项目属性

order

作用：order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex div:nth-child(1) {
            order: 5;
        }
        .flex div:nth-child(2) {
            order: 3;
        }
        .flex div:nth-child(3) {
            order: 1;
        }
        .flex div:nth-child(4) {
            order: 2;
        }
        .flex div:nth-child(5) {
            order: 4;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html>

运行效果如下：

image.png

align-self

作用：align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值

flex

作用： lex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写

使用：flex: flex-grow flex-shrink flex-basis;

参数说明如下：

  • flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；

  • flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；

  • flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(2) {
            flex:0;
        }
        .flex div:nth-child(4) {
            flex:1 1 auto;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html>

image.png

avatar
文章
阅读
粉丝