Blogger Information
Blog 19
fans 1
comment 0
visits 13306
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性盒子之弹性元素知识总结1--php培训第九期线上班
涤尘
Original
1481 people have browsed it





















总结:弹性盒子用来布局,相较以往布局方式更加灵活,代码量少,适配PC端和移动端,理解主轴与垂直轴定义!任何元素都可以变成弹性容器,进而设置出需要的效果,这个很强大!

以下弹性容器常用属性应牢记

序号 属性 取值 描述
1 flex-direction row(默认), row-reverse, columne, column-reverse 弹性元素在主轴上排列方向
2 flex-wrap norap(默认), wrap, wrap-reverse 弹性元素在主轴上是否换行
3 flex-flow flex-direction, flex-wrap 定义主轴方向以及弹性元素是否换行,flex-directionflex-wrap简写
4 justify-content flex-start(默认值),flex-end,center,space-between,space-around,space-evenly 弹性元素在垂直轴上的对齐方式与空间分布
5 align-items stretch(默认),flex-start,flex-end,center 定义弹性元素在垂直轴上的对齐方式
6 align-content stretch(默认),flex-start,flex-end,center,space-between,space-around,space-evenly 定义多行容器中弹性元素在垂直轴上的对齐方式与空间分配
Correction status:qualified

Teacher's comments:手写非常认真, 继续努力
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!