一只菜鸟对于弹性布局的总结

啥是弹性布局(问号脸)?以前盒子的布局都是使用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),简称"项目"。
一只菜鸟对于弹性布局的总结_第1张图片

容器有两个轴,一个水平主轴(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; 
        }

效果图

一只菜鸟对于弹性布局的总结_第2张图片

大家可以看到两个盒子都在屏幕的中间,那是因为我们在蓝色盒子的样式中添加了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:将占满整个容器的高度。


好啦,我要说的就是这么多了,弹性布局真的是很好用的样式!!!?
如若对于此文章不满意还望谅解,一只菜鸟真诚的心!!!♥

你可能感兴趣的