flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

一、容器的属性 :

　　flex-direction (主轴方向的排列顺序） ：row (默认值 水平方向从左到右)  |  row-reverse  |  colum（垂直方向从上到下）  |  colum-reverse

　　flex-wrap (是否换行) : nowrap(默认不换行) |  wrap (换行：第一行在上方)  |  wrap-reverse (换行：第一行在下方)

　　flex-flow (flex-direction和flex-wrap的结合)

　　justify-content (项目在主轴上的对齐方向)：flex-start (左对齐) |  flex-end （右对齐） | center （居中） |  space-between （两端对齐） |  　　　　　　　　　　　　space-around  |  space-evenly 

　　align-items (项目在交叉轴上的对齐方式)：flex-start  |  flex-end  |  center  |  baseline  |  stretch

　　align-content (用于控制多行项目的对齐方式): flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

二、项目的属性

　　order (项目排列顺序) ：默认为0，数值越小，越靠前

　　flex-grow (项目在有剩余空间时是否会放大)：默认值0(不放大)，如果值为1会占满剩余空间，如果a为2，b为1，则a占的空间是b的2倍

　　flex-shrink (空间不足时，是否缩小)：默认值1(空间不足时，大家一起等比缩小)，如果值为0，空间不足时，自身不变。

　　flex-basis (用于设置项目宽度) ：默认值 auto；如果项目设了width为50px,flex-basis:80px;则按80px，权重值高于width。

　　flex : 上述几个的复合属性，默认0 1 auto

　　align-self (表示继承父容器的align-items属性。如果没父元素，则默认stretch) ：auto(默认) | flex-start | flex-end | center | baseline | stretch

 

　　好啦，记住这些 flex布局就会用啦！~

/********
 *                    
 *                 .-~~~~~~~~~-._       _.-~~~~~~~~~-.
 *             __.'  欢迎访问     ~.   .~              `.__
 *           .'//     我的博客      \./   ☞ 送你小❤ ☜  \\`.
 *         .'//                     |                     \\`.
 *       .'// .-~"""""""~~~~-._     |     _,-~~~~"""""""~-. \\`.
 *     .'//.-"                 `-.  |  .-'                 "-.\\`.
 *   .'//______.============-..   \ | /   ..-============.______\\`.
 * .'______________________________\|/______________________________`.
 */

原文转载：https://www.cnblogs.com/echolun/p/11299460.html

 

标签：flex,space,布局,默认,对齐,flexbox
来源： https://www.cnblogs.com/anna001/p/14837789.html