display:flex属性

最新推荐文章于 2021-02-01 02:01:03 发布

十一️

最新推荐文章于 2021-02-01 02:01:03 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/m0_46389094/article/details/104591276

版权

Flex 是 Flexible Box 的缩写，意思是 ”弹性布局”，用来为盒子模型提供最大的灵活性。
设置flex布局后，子元素的float、clear 和vertical-align 属性将失效。

一.基本概念

使用flex布局的元素称作flex容器，简称“容器”。他所有的子元素都会自动成为容器成员，称Flex项目（flex item）,简称“项目”。

二.容器的属性

flex-direction属性：容器内部项目的排列向（默认横向排列）

属性值：
> row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的

flex-wrap属性：容器内项目换行方式

属性值：
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行

justify-content 属性:决定了主轴方向上子项的对齐和分布方式。

属性值：
flex-start ：子项都去起始位置对齐。
flex-end ：子项都去结束位置对齐。
center ：子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

align-items属性: 每一行中的子元素上下对齐方式。
```
 属性值： *flex-start;  center;  flex-end;*
```
align-content 属性:侧轴的对齐方式。
(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)

三.容器项目的属性

order：项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 flex　　是flex-grow,
flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box{ width:300px; height:300px; border:1px black solid; margin:100px;
        /* display:flex;
        flex-direction: row;
        justify-content: space-around; */

        /* display:flex;
        justify-content: space-around;
        flex-wrap: wrap; */

        /* display:flex;
        flex-wrap: wrap;
        align-content: space-around; */

        display:flex;
        flex-wrap: wrap;
        align-content:flex-start;
        align-items : flex-end;
    }
    #box div{ width:50px; background:red; margin-left:20px;}
    #box div:nth-of-type(5){ background:blue;}
    #box div:nth-of-type(6){ background:blue;}
    #box div:nth-of-type(7){ background:blue;}
    #box div:nth-of-type(8){ background:blue;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2<br>2<br>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

HTML5逆战班2002期----display:flex属性总结

十一️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:flex属性

Flex 是 Flexible Box 的缩写，意思是 ”弹性布局”，用来为盒子模型提供最大的灵活性。设置flex布局后，子元素的float、clear 和vertical-align 属性将失效。一.基本概念使用flex布局的元素称作flex容器，简称“容器”。他所有的子元素都会自动成为容器成员，称Flex项目（flex item）,简称“项目”。二.容器的属性flex-direc...
复制链接

扫一扫