flex布局基本了解

凉_橙
185 阅读3分钟

Flex布局

容器的属性

flex-direction

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

bg2015071005.png

flex-wrap

nowrap 不换行

wrap 换行

wrap-reverse;换行，第一行在下方。

flex-flow

是flex-direction和flex-wrap的合并，默认是row和nowrap

justify-content

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

  • flex-start（默认值）：左对齐

  • flex-end：右对齐

  • center： 居中

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

bg2015071010.png

align-items

定义项目在交叉轴上的对齐方式

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

bg2015071011.png

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

bg2015071012.png

项目的属性

order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负数

flex-grow

性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间；浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

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

  • flex-start：交叉轴的起点对齐。

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    ·····································

    借鉴网站

    www.ruanyifeng.com/blog/2015/0…

    麻将案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麻将案例</title>
    <link rel="stylesheet" href="./css/2麻将.css">
</head>

<body>
    <div id="bigbox">
        <div class="box box1">
            <span></span>
        </div>
        <div class="box box2">
            <span></span>
            <span></span>
        </div>
        <div class="box box3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4">
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box box5">
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <span class="center"></span>
            <div class="one">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box box6">
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box box7">
            <div class="two">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box box8">
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
            <div class="one">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box box9">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

    样式

    * {
    margin: 0;
    padding: 0;
}

#bigbox {
    display: flex;
    justify-content: space-between;
    width: 700px;
    margin: 100px auto;
}

.box {
    width: 60px;
    height: 70px;
    border: 1px solid #ccc;
}

span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: black;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box2,
.box3 {
    display: flex;
    justify-content: space-between;
}

.box2>span:nth-child(2),
.box3>span:nth-child(3) {
    align-self: flex-end;
}

.box3>span:nth-child(2) {
    align-self: center;
}

.box4,
.box5 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

.one {
    flex-basis: 100%;
    display: flex;
    justify-content: space-around;
}

.box5 .center {
    margin: 0 21px;
}

.box6,
.box8,
.box9 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
}

.box7 {
    display: flex;
    flex-wrap: wrap;
    height: 70px;
}

.box7>.two {
    /* flex-basis: 100%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.box7 .two span:nth-child(1) {
    align-self: flex-start;
}

.box7 .two span:nth-child(2) {
    align-self: center;
}

.box7 .two span:nth-child(3) {
    align-self: flex-end;
}

案例效果

image.png

本人小垃圾一枚，有什么问题，欢迎指正！！

avatar
文章
阅读
粉丝