专栏
扫码关注公众号
知道flex布局吗?那些属性作用在父元素上,那些属性作用在子元素上?
首先看张图片一般display:flex写在父元素的属性上!下面是基本理解!在flex容器中默认存在两条轴,水平主轴(mainaxis)和垂直的交叉轴(crossaxis),这是默认的设置在容器中的每个单元块被称之为flexitem,每个项目占据的主轴空间为(mainsize),占据的交叉轴的空间为(crosssize)。这里需要强调,不能先入为主认为宽度就是mainsize,高度就是crosssize,这个还要取决于你主轴的方向,如果你垂直方向是主轴,那么项目的高度就是mainsize。
哪些属性作用在父元素上?
justify-content:space-aroundspace-betweenspace-eventlycenterflex-endalign-items:flex-starflex-endflex-direction:rowrow-reversecolumncolumn-reverseflex-wrap:nowrap(如果子孩子,的宽度超过父盒子,会进行总动的伸缩)wrap(不去管)
哪些属性作用在子元素上?
order(项目排列的顺序越小越靠前)align-self(单个属性的操作flex-endcenterflex-star)flex-grow(如果剩余有宽度是否进行扩张方法,默认是0,)flex-shrink(空间不足的时候进行缩小默认是1进行缩小)