flex 换主轴后子元素占满_flex布局踩过的坑

虽然我对flex的基本用法已经比较了解，但是在使用过程中还是会经常遇到些大大小小的问题。这篇博客在对flex的基本概念做一个简单的回顾后，将重点记录我在使用flex时踩过的一些坑，这篇博客也会一直更新。

本文结构：

flex布局基本概念

flex container

flex item

踩过的坑

flex container的高度问题

flex-direction与justify-content、align-items的对应关系

一、flex布局基本概念

首先要了解flex的两个最基本的概念，容器(flex container)和项目(flex item)，flex container包含flex item。通过对flex container和flex item进行flex布局，可实现多种多样的布局效果。

1、flex container

flex container为容器，主要对各个flex item的排列方向、排列顺序、对齐方式进行设置。

属性

含义

取值

flex-direction

排列方向

row(default)/row-reverse/column/column-reverse

flex-wrap

是否换行

nowrap(default)/wrap/wrap-reverse

flex-flow

flex-direction和flex-wrap的简写

row nowrap(default)

justify-content

主轴对齐方式

flex-start/flex-end/center/space-between/space-around

align-items

侧轴对齐方式

flex-start/flex-end/center/baseline/stretch(default)

align-content

多行/列内容对齐方式

flex-start/flex-end/center/stretch/space-between/space-around

2、 flex item

flex item为项目，主要对item本身的一些特性进行设置。

属性

含义

取值

order