Flex布局伸缩布局属性详解

CSS3在布局方面做了非常大的改进，Flex布局官方称为CSS Flexble Box布局模型使得我们对块级元素的布局排列变得非常的灵活，适应性非常强。

其强大的伸缩性，可以提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。在响应式开发中发挥极大的作用。

本文主要讲解flex的属性详细使用方法

1. 基本理解

在使用Flex布局前我们首先要明白Flex模型是什么东西。Flex布局是由父容器（flex-container）和它的直接子元素flex项目（flex-item）构成。

在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语，你可以阅读W3C的官方文档来了解他们的意思。

需要理解的名词	解释
main-axis	主轴（默认是水平的）
cross-axis	侧轴（默认是垂直的）
main-start	主轴开始的位置
main-end	主轴结束的位置
cross-start	侧轴开始的位置
cross-end	侧轴结束的位置

直接子元素“项目”沿主轴排列；
单个项目占据的主轴空间叫做main size，占据的侧轴空间叫做cross size。

Flex布局2019年最新主流浏览器支持情况

---

2. 用法详解
使用Flex布局首先要灵活理解Flex布局的原理（可以理解为把父元素变成一个flex-container容器，父元素中包括的子元素都成为该容器中的一个个项目，对父元素设置后，子元素会自动的做出相应的反应，所以我们不必对子元素一个个的进行布局，这样方便多了）

首先：我们应在HTML中的父元素上设置display属性

    .flex-container {
   
            display: -webkit-flex;/* Safari */
            display: flex;
        }
```css
或者想让它像内联元素一样可以：

```css
    .flex-container {
   
            display: -webkit-inline-flex;/*Safari*/
            display: inline-flex;
        }

!注意：这是唯一的要设置在父容器上的属性，所有的直接子元素会成为自动flex项目。

---

3.各属性详解

常用属性

容器属性	项目属性
01:flex-direction	align-self
02:justify-content
03:align-items
04:align-content
05:flex-wrap

⭐01:flex-direction

Flex-direction	调整主轴方向（默认为水平方向）
flex-direction: row (默认)	row：主轴水平排列
flex-direction: column	column：主轴垂直排列
flex-direction: row-reverse	row-reverse：主轴水平翻转
flex-direction: column-reverse	column：主轴垂直翻转

flex-direction:row(默认值) | row-reverse | column | column-reverse;
//该属性指定了Flex的项目怎样在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个主要的方向排列，就像一行一样水平排列或者像一列一样垂直排列。

.flex-container {
   
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
  }

flex-direction:row;

.flex-container {
   
	-webkit-flex-direction: row;/*Safari*/
	flex-direction: row;
}

flex-direction: row-reverse;

 .flex-container {
   
            flex-direction: row-reverse;
        }

flex-direction:column;

 .flex-container {
   
            flex-direction: coulmn;
        }

flex-direction:column-reverse;

 .flex-container {
   
            flex-direction: coulmn-reverse;