前端|flex布局 css|html

flex布局-介绍

什么是flex布局？
它的由来：由于传统的布局解决方案太过复杂，例如：垂直居中、两端固定中间自适应。2009年，W3C提出了一种新的方案——flex布局
也叫伸缩布局，flex布局
它有什么好处？
好处：简单、灵活、自适应
初体验：
文章图片

flex布局-使用步骤

第一步：给父盒子设置 display: flex;
【前端|flex布局】一旦给父盒子添加了 display: flex; 则会发生两件事：
- 父盒子就变成了弹性盒子（Flexbox），一般称为容器,父盒子还是老的,原来的,子盒子是全新的盒子
- 子元素就变成了一个全新的盒子，既不是行内、行内块，也不是块级元素（无论子元素原来是什么类型，现在都可以设置width、height、四个margin、四个padding了），一般称为项目
第二步：给父盒子或子元素添加属性来控制子元素在父盒子里的布局
示例：M·M·F 小屋

flex布局-理解主轴和侧轴 flexbox里存在两根轴：

主轴（默认水平，并且从左到右）
侧轴（默认垂直，并且从上到下）

他俩关系：
始终保持垂直
作用：
控制Flexbox里子元素的排列方式
特别注意：
子元素永远按照主轴方向排列

文章图片

容器的属性设置主轴的方向

flex-direction: row行(默认值) | row-reverse颠倒相反 | column柱子 | column-reverse; /* row:表示水平从左向右 row-reverse:表示水平从右向左 column: 表示垂直从上向下 column-reverse:表示垂直从下向上 */

文章图片

注意：

当flex-direction设置为column或column-reverse时，侧轴则自动变为水平方向，原因是它俩要始终保持垂直
没有设置侧轴方向的属性

设置主轴对齐方式

justify-content: flex-start(默认值) | flex-end | center |space-between | space-around | space-evenly平均的; /* flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 space-evenly：项目和项目之间、项目和边框之间，距离都相等 */

设置侧轴对齐方式（单行）

align-items: stretch(默认值) | flex-start | flex-end | center | baseline; /* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 */