Flex 布局

写代码的不谷

已于 2023-03-10 22:08:58 修改

阅读量70

点赞数

分类专栏： CSS 文章标签： css

于 2023-03-10 17:58:13 首次发布

本文链接：https://blog.csdn.net/bugu_hhh/article/details/129448499

版权

CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、Flex 布局

父元素添加了display:flex;之后
子元素均有了自适应的 w、h
子元素的浮动失效

二、常见语法

1. 父元素的属性

(1) 设置主轴的方向

flex-direction: XXX;


	row：			左到右【默认】
	row-reverse：	右到左
	column：			上到下
	column-reverse：	下到上

(2) 设置主轴上面的子元素的排列方式

justify-content: XXX;


	flex-end：		右对其
	flex-start：		左对齐【默认】
	center：			居中显示
	space-around：	直接平分剩余空间
	space-between：	占据两边

(3) 设置子元素是否换行显示

flex-warp:


	nowrap：	不换行【默认】【待验证：若不换行，子元素的w就无效】
	warp：	换行

(4) 设置侧轴元素的排列方式【单行】

align-items:


	flex-start：	上到下
	flex-end：	下到上
	center：		局中
	stretch：	拉伸，子元素无高度时，默认与父元素一样高【默认】

(5) 设置侧轴元素的排列方式【多行】

align-content:


	flex-start：		上到下
	flex-end：		下到上
	center：			居中显示
	space-around：	直接平分剩余空间【四周可能有空余】
	space-between：	占据两边【四周无空余】
	stretch：		平分父亲高度

2. 子元素的属性

(1) 子元素所占份额

flex: XXX;


	n 占几份

(2) 子元素的优先级

order: XXX;


	n 你越小，优先级越高，默认为0
	优先级越高，排的位置越靠前

三、常用举例

1. 单行排列

<head>
    <style>
        .father {
            display: flex;
            margin: 0 auto;
            width: 300px;
            height: 100px;
        }

        .son1 {
            flex: 1;
        }

        .son2 {
            width: 50px;
        }

        .son3 {
            width: 50px;
        }

        .son4 {
            flex: 9;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1" style="background-color: #bd362f"></div>
        <div class="son2" style="background-color: #fabec8"></div>
        <div class="son3" style="background-color: #dddddd"></div>
        <div class="son4" style="background-color: #8c1818;"></div>
    </div>
</body>

在这里插入图片描述

2. 多行排列

<head>
    <style>
        .father {
            display: flex;
            /* 占据两边 */
            justify-content: space-between;
            /* 可以换行 */
            flex-wrap: wrap;
            /* 占据两边 */
            align-content: space-between;
            margin: 0 auto;
            width: 1000px;
            height: 300px;
        }

        .son {
            width: 400px;
            height: 60px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son" style="background-color: #bd362f;"></div>
        <div class="son" style="background-color: #232121;"></div>
        <div class="son" style="background-color: #463837;"></div>
        <div class="son" style="background-color: #5dbd38;"></div>
        <div class="son" style="background-color: #565d54;"></div>
        <div class="son" style="background-color: #961345;"></div>
        <div class="son" style="background-color: #30d270;"></div>
        <div class="son" style="background-color: #2b1091;"></div>
    </div>
</body>