flex弹性布局(二)

前言

继续昨天的话题flex弹性布局，昨天没看的同学可以点击此链接查看flex弹性布局(一)

原示例代码

• CSS

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
}

.flex-box {
    width: 100px;
    height: 100px;
    background: #00D3E9;
    margin: 20px;
}

.text {
    margin: 30px;
    color: #FFFFFF;
}

• HTML

<div class="container">
    <div class="flex-box">
        <div class="text">AAA</div>
    </div>
    <div class="flex-box">
        <div class="text">BBB</div>
    </div>
    <div class="flex-box">
        <div class="text">CCC</div>
    </div>
</div>

align-content

作用：用于修改 flex-wrap 属性的行为。

原图

• align-content: center;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

图1

• align-content: flex-end;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

图2

• align-content: stretch;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    /* align-content: stretch; */
    -webkit-align-content: stretch;
}

图3

• align-content: flex-start;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; 
    /*-webkit-align-content: flex-start;*/
}

图4

• align-content: space-around;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    align-content:space-around;
}

图5

• align-content: space-between;

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
}

图6

flex子元素的相关属性

注意：以下代码在原示例代码的基础上添加或修改。

• margin：auto;
  作用：设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

.flex-box:nth-child(1){
    margin: auto;
}

图7

align-self

作用：用于设置弹性元素自身在侧轴（Y轴）上的对齐方式。

CSS

.flex-box:nth-child(1) {
    align-self: flex-start;
}

.flex-box:nth-child(2) {
    align-self: flex-end;
}

.flex-box:nth-child(3) {
    align-self: center;
}

.flex-box:nth-child(4) {
    align-self: stretch;
}

.flex-box:nth-child(5) {
    align-self: baseline;
}

.flex-box:nth-child(6) {
    align-self: auto;
}

HTML

<div class="container">
    <div class="flex-box">
        <div class="text">flex-start</div>
    </div>
    <div class="flex-box">
        <div class="text">flex-end</div>
    </div>
    <div class="flex-box">
        <div class="text">center</div>
    </div>
    <div class="flex-box">
        <div class="text">stretch</div>
    </div>
    <div class="flex-box">
        <div class="text">baseline</div>
    </div>
    <div class="flex-box">
        <div class="text">auto</div>
    </div>
</div>

图8

• flex的其他用法
  CSS

.flex-box:nth-child(1) {
    flex: 1;
}

.flex-box:nth-child(2) {
    flex: 2;
}

.flex-box:nth-child(3) {
    flex: 3;
}

HTML

<div class="container">
    <div class="flex-box">
        <div class="text">1</div>
    </div>
    <div class="flex-box">
        <div class="text">2</div>
    </div>
    <div class="flex-box">
        <div class="text">3</div>
    </div>
</div>

图9

总结

其实弹性布局是一个比较重要的知识点，不仅如此，它的作用也是非常的广泛，有一点就是，关于它的操作方式还是挺多的，有时候会傻傻分不清。弹性布局到这里就结束了。

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)