FlexBox布局

book_longker

已于 2023-08-30 10:40:59 修改

阅读量154

点赞数

分类专栏： # Angular 文章标签： css css3 html

于 2022-01-02 17:32:14 首次发布

本文链接：https://blog.csdn.net/book_longker/article/details/122275564

版权

Angular 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

FlexBox布局

一、Flex 布局是什么？
二、基本概念
三、容器的属性
四、项目的属性

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.flex-container {
	display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
	display: inline-flex;
}

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿水平方向排列，哪主轴排列就为水平方向，交叉轴就是垂直方向；当项目沿着垂直方向排列时，哪主轴就为垂直方向，交叉轴就是水平方向

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

容器的属性,有六个

flex-direction
justify-conent
align-item
flex-wrap
flex-flow
align-content

通过一个列子来操练

<head>
   <style>
        .flex-container {
            display: flex;
            flex-direction: rows;
            background-color: beige;
            height: 500px;
            /* 主轴的位置 */
            justify-content: flex-end;
            /* 交叉轴 的位置 */
            align-items: flex-end;
            
        }
        .box {
            width: 60px;
            height: 60px;
        }

        .A {
            background-color: lightblue;
        }

        .B {
            background-color: lightcoral;
        }

        .C {
            background-color: lightcyan;
        }

        .D {
            background-color: lightgreen;

        }

        .E {
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="box A">A</div>
        <div class="box B">B</div>
        <div class="box C">C</div>
        <div class="box D">D</div>
        <div class="box E">E</div>
    </div>
</body>

flex-direction 属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

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

它可能有4个值。

row (默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

justify-content 属性

定义项目在主轴的对齐方向

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items 属性

定义项目在交叉轴上如何对齐

.flex-container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-wrap 属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

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

flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container {
	/* flex-flow:<flex-direction> || <flex-wrap>; */
	flex-flow: column wrap;
}

align-content 属性

定义了多根主轴线的对齐方式, 行与行的对齐效果

.flex-container {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

如图：

<style>
        .flex-container {
            background-color: beige;
            display: flex;

            width: 200px;
            height: 240px;

            flex-flow: row wrap;
            /* align-content: flex; */
            
        }
        .box {
            width: 60px;
            height: 60px;
        }

        .A {
            background-color: lightblue;
        }

        .B {
            background-color: lightcoral;
        }

        .C {
            background-color: lightcyan;
        }

        .D {
            background-color: lightgreen;

        }

        .E {
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="box A">A</div>
        <div class="box B">B</div>
        <div class="box C">C</div>
        <div class="box D">D</div>
        <div class="box E">E</div>
    </div>
</body>

没有设置align-content的情况；主轴线排不下，D,E 换行，就是多了一根轴线；可以观察到第二根水平轴线在D,E的上沿，把高度平分了

	align-content:flex-start;

在这里插入图片描述

	align-content:flex-end;

在这里插入图片描述

	align-content:center;

在这里插入图片描述

四、项目的属性

order 属性

order 属性定义项目的排列顺序。数值由小到大排序，小的排在前大的排在后，默认为0

        .A {
            background-color: lightblue;
            order: 4;
        }

        .B {
            background-color: lightcoral;
            order: 5;
        }

在这里插入图片描述

flex-grow 属性

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；如果该项目组只有一项是设置为1（大于1就行）时，则该项将放大到容器的最大宽度或高度；多项设置为大于1的时候；则按项目的flex-grow比例进行放大

.A {
    background-color: lightblue;
    flex-grow: 1;
}

.B {
    background-color: lightcoral;
    flex-grow: 1;
}

在这里插入图片描述

flex-shrink 属性

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，设置属性为0的不缩小；其他的等比例缩小

flex-basis 属性

flex-basis 属性是设定的主轴空间（main size）大小。它的默认值为auto，即项目的本来大小

flex 属性

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选,该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

align-self 属性

align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

book_longker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
FlexBox布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器的属性,有六个flex-directionflex-wrapflex-flowjustify-conentalign-itemalign-content.box { flex-direction: row | row-reverse | column | column-reverse;}.
复制链接

扫一扫