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

构建移动布局框架:重温flex

时间:2023-03-31 10:47:53 CSS

0x001概述下面说说flex文章。我想除了阮一风先生,没有人能打得过它,所以这里只是聊聊记录一下。0x002基本概念弹性容器:元素添加弹性属性后,成为弹性容器。Axes:FlexContainer的坐标轴分为mainaxes(主轴)和crossaxes(相交轴)。Flexitem:一旦父元素添加了flex属性,子元素将直接成为flex子元素,不再显示默认布局,而是沿Flex容器的主轴排列。如果改变主轴方向,子元素的排列方向也会改变默认样式(box定义一个100*100的盒子,container定义一个500*100的盒子,bg*只是背景色)

添加弹性属性到父元素0x003容器属性属性介绍flex-direction:flex-wrap:flex-flow:justify-content:align-items:align-content:flex-direction:该属性可以改变主轴的方向,而子元素是沿主轴排列的,所以改变主轴的方向就会改变子元素的排列方向。初始值:row可选值:row:主轴是从mainstart到mainendrow-reverse:主轴是从mainend到mainstartcolumn:主轴是从crossstart到crossendcolumn-reverse:主轴是从crossend到crossstartflex-wrap默认情况下,当子元素沿主轴排列时,如果所有子元素的总大小超过父元素,子元素会被压缩,这个属性可以改变这种情况,这样在这种情况下就不会压缩子元素的宽度。初始值:nowrap可选值:nowrap:nonewlinewrap:newlinewrap-reverse:Newlineandreverseorder![clipboard.png](/img/bVKrAI)flex-flow是flex-direction和flex-wrapInitialvalue:rownowrapjustify-content这个属性定义了子元素相对于父容器的对齐方式初始值:flex-start可选值:flex-start:子元素靠近mainstartflex-end:子元素靠近mainendcenter:child元素居中space-between:子元素两边没有边距,等距居中-around:子元素等距居中align-items该属性定义了子元素在横轴上的对齐方式Initialvalue:stretch可选值:flex-start:子元素相对于crossstart对齐flex-end:子元素相对对齐aligncenteratcrossend:子元素相对于交叉轴居中baseline:子元素相对对齐tivetothebaselineofthefirstchildelementstretch:如果子元素没有设置高度,会被拉伸到容器的最大高度align-content这个属性定义了多个主轴在交叉轴上的对齐方式。初始值:stretch可选值:flex-start:多轴相对于crossstart对齐flex-end:多轴相对于crossend对齐center:多轴相对于cross轴对齐居中对齐space-between:有就是多轴两端没有间距,中间等间距。space-around:多个轴等间距对齐。stretch:如果没有设置轴的高度,则拉伸到容器的最大高度。0x004子元素属性属性介绍:顺序align-selfflex-growflex-shrinkflex-basisorder值越小越接近主起点初始值:0flex-grow该属性定义子元素占用剩余空间的比例。值越大,align-self的比例越大,这个属性定义了子元素相对于正交轴对齐的初始值:stretch可以选择值:flex-start:元素相对于交叉起点对齐flex-end:元素相对于交叉终点对齐center:元素相对于交叉轴居中baseline:元素相对于基线对齐第一个子元素的拉伸:如果元素没有设置高度的话,会拉伸到容器的最大高度。flex-shrink该属性定义了元素的缩小比例。值越大,缩小比例越大。0不缩放flex-basisflex-basis属性在分配多余空间之前定义项目。占用的主轴空间(mainsize)浏览器根据该属性计算主轴是否有多余空间。它的默认值为auto,即项目的原始大小。(摘自阮一峰博客原文)0x004总结其实我看了很多阮一峰老师关于flex的博客,还是没看懂。排序方式变了,但是它的flex-directory的作用是交换主轴和横轴的位置。从这个方向出发,我们才能真正理解flex在不同方向的布局。即我们不能用x轴和y轴来理解flex,而是用主轴和交轴来理解。0x005下一篇搭建移动端布局框架:集成flex