当前位置: 首页 > Web前端 > HTML

一个菜鸟对柔性布局的总结

时间:2023-04-02 14:20:58 HTML

什么是柔性布局(问号脸)?以前盒子的布局都是用position、float、display来布局的。事实上,这非常烦人。最近发现一个知识点,就是弹性布局。下面我们就来看看什么是弹性布局吧!什么是ElasticLayout弹性就是Flex,用来为盒模型提供最大的灵活性,任何容器都可以指定为Flex布局。例如:.box{display:flex;}.box{inline-display:flex;}注意设置flex布局后,子元素的float、clear、vertical-align属性将失效!!!其基本概念采用了弹性布局元素,称为弹性容器(flexcontainer),简称“容器”。它的所有子元素都自动成为容器的成员,称为弹性项目(flexitem),简称“项目”。容器有两个轴,水平主轴(mainaxis)和垂直横轴(crossaxis),起点和终点都在容器的边界。Howtodo说实话,我知道的不多,只能写我知道的!比如先定义两个盒子:.box{width:200px;高度:200px;背景色:rgb(135,135,248);显示:弹性;对齐项目:居中;证明内容:居中;}。内部{宽度:100px;高度:100px;背景:粉色;对齐自我:弹性结束;}

大家可以看到两个盒子都在屏幕中间,那是因为我们添加了display:flex;align-项目:中心;证明内容:居中;到蓝框的样式。让我一一告诉你。display:flex允许这个盒子具有灵活布局的属性,同时定义了粉色盒子作为子元素。有父必有子,(^▽^);justify-contentjustify-content是主轴的对齐方式,center顾名思义就是居中。当然,他还有其他属性。space-around:每个项目两边的间距相等。因此,项目之间的间距是项目与边框之间的间距的两倍。align-itemsalign-items为垂直横轴对齐,具有以下属性:flex-start:对齐横轴的起始点。flex-end:横轴末端对齐。center:横轴的中点对齐。baseline:项目中第一行文本的基线对齐方式。stretch(默认):如果item没有设置高度或者设置为auto,它会占据整个容器的高度。同心也可以看到,我们的粉盒不在它爸爸的中间,那是因为他也有自己的个性,那就是我们的同心!align-self属性允许单个项目与其他项目具有不同的对齐方式,并且可以覆盖align-items属性。auto(默认):继承父元素的属性。flex-start:横轴起点对齐。flex-end:横轴末端对齐。center:横轴的中点对齐。stretch:会占据整个容器的高度。好了,我就说这么多吧,灵活布局真的是一个很好用的样式!!!?如果您对本文有不满意的地方,还请见谅我这个有一颗赤诚之心的菜鸟!!!?