flex弹性布局(一)

前言

“把现在的工作做好，才能幻想将来的事情，专注于眼前的事情，对于尚未发生的事情而陷入无休止的忧虑之中，对事情毫无帮助，反而为自己凭添了烦恼。”今天我们来了解一下CSS中的flex弹性布局，看看它都有哪些厉害的操作。

为什么使用flex

使用flex布局能够有效提高页面的灵活性，满足我们在网页编写时的需要。

使用方法

通过设置 display 的属性值为 flex 或 inline-flex。

• CSS示例

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

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

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

• HTML示例

<div class="container">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>

• 示例图

  
  图1

flex-direction

作用：flex-direction 属性指定了弹性子元素在父容器中的位置。
由于接下来的示例只改变以上的container属性值，所以只给出父级容器的CSS代码和效果图。

• flex-direction: column;/* 纵向排列*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-direction: column; /* 纵向排列*/
}

图2

• flex-direction: row;/* 横向排列,水平方向*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-direction: row;/* 横向排列,水平方向*/
}

图3

• flex-direction: row-reverse;/* 水平线上的反向排列*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-direction: row-reverse; /* 水平线上的反向排列*/
}

图4

• flex-direction: column-reverse;/* 纵向上的反向排列*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    flex-direction: column-reverse; /* 纵向上的反向排列*/
}

图5

justify-content

作用：内容对齐属性应用在弹性容器上的方式。

• justify-content: center;/* 居中 */

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    justify-content: center;/* 居中 */
}

图6

• justify-content: left;/* 居左 ，与flex-start相同效果*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    justify-content: left;/* 居左 */
}

图7

• justify-content: end;/* 居后，亦可以看作right 与flex-end相同效果*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    justify-content: end;/* 居后*/
}

图8

• justify-content: space-between;/* 两者之间，*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    justify-content: space-between;/* 两者之间*/
}

图9

• justify-content:space-around/* 环绕模式*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    justify-content:space-around/* 环绕模式*/
}

图10

align-items

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

• align-items: flex-start;/* 居上*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    align-items: flex-start;/* 居上*/
}
![图13](https://img.haomeiwen.com/i6332806/863dbcb4483336e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• align-items: center;/* 居中*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    align-items: center;/* 居中*/
}

图11

• align-items: flex-end;/* 居底部*/

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    border: gray 1px solid;
    display: flex;
    align-items: flex-end;/* 居底部*/
}

图12

flex-wrap

作用：指定弹性盒子里的元素换行方式。

• flex-wrap: nowrap;/不换行/

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

图13

• flex-wrap: wrap;/换行/

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

图14

• flex-wrap: wrap-reverse;

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

图15

总结

flex-wrap: wrap-reverse;我没有做解释，因为我还不太确定它的属性值。明天接着更，把它补上。

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