html弹性布局好用么,一只菜鸟对于弹性布局的总结

啥是弹性布局(问号脸)？以前盒子的布局都是使用position、float、display来布局的，其实超级烦的，最近发现了一个知识点，那就弹性布局，那就让我们来看看什么是弹性布局吧！

What's 弹性布局

弹性就是Flex，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。

例如：

.box{display:flex;}

.box{inline-display:flex;}

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

基本概念

采用flex布局的元素，称为flex容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为flex项目(flex item)，简称"项目"。

容器有两个轴，一个水平主轴(main axis)一个垂直交叉轴(cross axis)，起点终点都是容器的边界。

How to do

说实话其实我了解的也不多，我只能把我知道的写出来啦！

例如，先定义两个盒子：

.box{

width: 200px;

height: 200px;

background-color: rgb(135, 135, 248);

display: flex;

align-items: center;

justify-content: center;

}

.inner {

width: 100px;

height: 100px;

background: pink;

align-self: flex-end;

}

效果图

大家可以看到两个盒子都在屏幕的中间，那是因为我们在蓝色盒子的样式中添加了display: flex;align-items: center;justify-content: center;让我一个个道来。

display:flex让这个盒子拥有了弹性布局的属性，而作为子元素的粉红盒子也被定义了，有其父必有其子嘛，(^▽^)；

justify-content

justify-content为主轴的对齐方式，center顾名思义就是居中咯，当然他还有其他属性啦

flex-start(默认值)：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items为垂直交叉轴对齐方式，拥有的属性如下：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-self

大家还可以看到，我们的粉盒子并没有在它爸爸的中间，那是因为他也有自己的个性呀，那就是我们的align-self啦！

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

auto(默认值): 继承父元素的属性。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch：将占满整个容器的高度。

好啦，我要说的就是这么多了，弹性布局真的是很好用的样式！！！?

如若对于此文章不满意还望谅解，一只菜鸟真诚的心！！！♥