Flexbox是一個強大而靈活的布局，本篇文章主要對其進行學習了解。

一、Flexbox簡介

Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局，即使他們的大小是未知或者是動態的。簡單的理解，就是可以自動調整，計算元素在容器空間中的大小，并進行有效合理的布局。

Flexbox布局中有兩個重要的概念：Flex容器和Flex項目。

Flex容器包含多個Flex項目，通過對Flex容器和Flex項目的具體屬性進行設置，可以達到各種各樣靈活的布局樣式。

Flexbox使用

Flexbox的使用非常簡單，只需要對Flex容器設置display:flex或者display:inline-flex，就可以具體操作使用Flexbox布局了。

下面以具體示例演示：

html代碼

<div class="container">
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</div>

css代碼

.container {
width: 70%;
height: 500px;
margin:20px auto;
border: 1px solid black;
}
.container .wrap {
display: flex;
border: 3px solid #a448cf;
margin:20px;
width:80%;
height:80%
}
.container .wrap div {
width:150px;
height:150px;
background-color: #c75a5a;
margin:10px;
}

二、Flex容器

首先介紹下Flex容器的具體屬性以及具體的使用方式。

1. flex-direction

flex-direction屬性控制Flex項目沿著主軸（Main Axis）的排列方向，可以是行（水平）、列（垂直）或者行和列的反向。

默認情況下flex-direction的屬性值是row,具體排列方式如下：