div里的转发如何换行_如何讲清楚Flex弹性盒模型？(上)

一、什么是Flex弹性盒？

Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效

因此我们至少能确定一点，flex替代了浮动的解决方案。

我们来看一下它的基本特点。

在flex容器当中，div这样的块元素不再独占一行

而是自动排成一行。

这个效果虽然和浮动很像, 但是请记住, 在flex的容器里, 不存在浮动的概念, 我将代码贴出来, 大家可以自行尝试.

div容器

width: 100px

height: 100px

div容器

width: 100px

height: 100px

div容器

width: 100px

height: 100px

dispplay: flex的元素，称为Flex容器(flex container)，它的所有子元素称为Flex项目(flex item)。

在flex容器当中, 项目的排列方式默认是row(水平的). 可以使用flex-direction属性进行更改

.container {    display: flex;    flex-direction: row;  /*这是默认值, 按照row(水平方向)排列*/}

如果将这个属性进行更改column

.container {    display: flex;    flex-direction: column;  /* 按照列column(垂直方向)排列*/}

效果如下:

你看, flex容器里的项目, 变成了垂直方向, 由上至下排列

对于一个flex容器来说, 子项目的排列方向, 只有row和column这两种,

怎么样, 很简单把?

当然, 项目不仅可以从左向右, 还可以反过来, 从右向左

.container{    display: flex;    flex-direction: row-reverse;/* 按照行(反方向)排列*/}

效果如下:

垂直方向也是如此

.container{    display: flex;    flex-direction: column-reverse;/* 按照列(反方向)排列*/}

---

一个flex容器, 子项目默认是不换行的

当然, 想要换行的话, 可以通过flex-wrap属性可以修改

.container {    flex-wrap: nowrap | wrap | wrap-reverse;}

我们还可以通过 justify-content属性 设置「主轴」的对齐方式

注意:主轴的方向不一定是水平方向 它是由flex-direction决定的. 可以是 row方向 也可以 column方向, 下面的例子假定主轴为row, 因此column方向为对应 侧轴

.container {     justify-content: flex-start | flex-end | center | space-between | space-around;}

flex-start 可以理解为左对齐

flex-end 可以理解为右对齐

center 居中对齐

space-between 两侧对齐

space-around 两侧间隔均匀

---

如果flex容器是固定高度的, 且大于了子元素, 这时, 我们可能还需要侧轴(垂直方向)的对齐方式

align-items属性定义项目在交叉轴上如何对齐。

.container {    align-items: flex-start | flex-end | center | baseline | stretch;}

flex-start 可以理解为顶部对齐

flex-end 底部对齐

center 中部对齐

baseline 基线对齐

stretch 上下两侧对齐

子元素设置了高度, 因此没有效果

子元素没有设置高度

---

简单总结一下

弹性盒的容器属性(添加在父元素身上 )

1 display:flex;属性

.box{   display: -webkit-flex; /* Safari或者chrome*/   display: flex;}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

同时，需要加上-webkit-前缀，兼容-webkit-低版本写法。

2 flex-direction属性

flex-direction属性决定主轴的方向(即容器内子元素的排列方向)。

.box {    flex-direction: row | row-reverse | column | column-reverse;}

3 flex-wrap属性

默认情况下，子元素都排在一条线(又称”轴线”)上, 不换行。flex-wrap属性定义是否换行, 以及换行方式

.box{    flex-wrap: nowrap | wrap | wrap-reverse;}

4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {     justify-content: flex-start | flex-end | center | space-between | space-around;}

5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {    align-items: flex-start | flex-end | center | baseline | stretch;}