flex弹性布局（一）

 

　　最近有点小偷懒，已经好久没有写博客啦！为了消除我的惰性，今天就算天塌下来我也要。。。。。写博客！！！

　　由于最近刚把flex从头到尾复习一遍，所以今天就来谈一谈flex弹性布局好了。相信道友们在面试的时候，肯定已经被垂直水平居中这个千古大题所折磨，虽然纯css可以解决垂直水平居中的问题，但是和flex一比较就显得有点复杂了，所以在写样式时，我们要多用flex弹性布局。

　　flex布局可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为flex布局，但是要注意的是：设为flex布局以后，子元素的float、clear 和 vertical-align属性会失效。

（一） 容器（父元素）的属性

　　flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这六个属性设置在容器（父元素）上。

　　下面我就分别来分析这六个属性是怎么用的，这六个属性中常用的当然是水平垂直居中了，所以就先分析水平居中和垂直居中怎么实现。

　　1、justify-content属性    设置主轴（横轴）对齐方式 

　　　　它有5个值：

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

　　　　　　flex-end：右对齐

　　　　　　center：居中

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

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

　　　　实践出真知，下面就上代码和运行结果来看一下效果吧~~~

 （1）center  水平居中

　　代码：

//html代码
<div class="parent">
    <div class="children"></div>
</div>

//css代
.parent {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    display: flex;
    justify-content: center; /*水平居中*/
}
.children {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
}

运行效果：

 

从运行效果图片上可以看到已经水平居中啦！

（2）flex-start 左对齐

　　由于代码差不多，下面就不重复上代码了，但是运行效果还是要滴~~~

 （3）flex-end   右对齐

（4）space-between  两端对齐

代码：

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent{
    width: 500px;
    height: 200px;
    background: red;
    display: flex;
    justify-content: space-between;
}
.children{
    width: 100px;
    height: 100px;
    background: blue;
}

 

（5）space-around  每侧的间隔相等

 代码同上，将space-between改成space-around即可

下面是运行效果：

 

2、 align-items属性   定义属性在交叉轴（纵轴）上如何对齐

　　它也有5个值：

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

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

　　　　center：交叉轴的中点对齐

　　　　baseline：项目的第一行文字的基线对齐

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

（1）flex-start 交叉轴  纵轴起点对齐

.parent{
    width: 200px;
    height: 200px;
    background: red;
    display: flex;
    align-items: flex-start;
}
.children{
    width: 100px;
    height: 100px;
    background: blue;
}

（2）flex-end  交叉轴终点对齐

（3）center  交叉轴中点对齐

（4）baseline  第一行文字的基线对齐

<div class="parent">
    <div class="children1">
        <p>我是第一行</p>
        <p>我是第二行</p>
    </div>
    <div class="children2">
        <p>我是第一行</p>
        <p>我是第二行</p>
    </div>
</div>

.parent{
    width: 300px;
    height: 300px;
    background: red;
    display: flex;
    align-items: baseline;
}
.children1{
    width: 100px;
    height: 100px;
    background: blue;
}
.children1 p{
    font-size: 20px;
}
.children2{
    width: 100px;
    height: 150px;
    background: blue;
}

（5）stretch 子元素未设置高度或为auto，高度占满整个容器

.parent{
    width: 400px;
    height: 200px;
    background: red;
    display: flex;
    align-items: stretch;
}
.children{
    width: 100px;
    background: blue;
    margin-left: 20px;
}

 

3、flex-direction属性   决定主轴的方向即项目的排列方向

　　它有4个值：

　　　　row（默认值）：主轴为水平方向，起点在左端

　　　　row-reverse：主轴为水平方向，起点在右端

　　　　column：主轴为垂直方向，起点在上沿

　　　　column-reverse：主轴为垂直方向，起点在下沿

（1）row（默认值）  从左向右排列

.parent{
    width: 600px;
    height: 200px;
    background: red;
    display: flex;
    flex-direction: row;
}
.children{
    width: 100px;
    height: 100px;
    background: blue;
    margin-left: 20px;
}

（2）row-reverse   从右向左排列

 

（3）column  从上向下排列

（4）column-reverse  从下向上排列

 

4、flex-wrap属性  定义了一条轴线放不下的情况下，如何换行

　　它有3个值：

　　　　nowrp（默认）：不换行

　　　　wrap：换行，第一行在上方

　　　　wrap-reverse：换行，第一行在下方

（1）nowrap（默认）  不换行

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.parent{
    width: 200px;
    height: 200px;
    background: red;
    display: flex;
    flex-wrap: nowrap;
}
.children{
    width: 50px;
    height: 50px;
    background: blue;
    margin:0px 5px 0px 5px;
}

 

（2）wrap  换行，第一行在上方

（3）wrap-reverse  换行，第一行在下方

 

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

.parent {
　　flex-flow: <flex-direction>  <flex-wrap>;
}

 

至此，父元素（容器）的5个属性终于完结了~~~

转载于:https://www.cnblogs.com/nana402/p/9670263.html