尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Flex 弹性布局:属性、场景、实战案例

Flex 弹性布局:属性、场景、实战案例 1. Flex 核心优势一维布局、自动适配、居中简单、无浮动塌陷、移动端首选。2. 父容器属性display: flex开启弹性布局flex-direction主轴方向 row / columnjustify-content主轴对齐水平center/space-between/space-aroundalign-items侧轴对齐垂直center/flex-start/stretchflex-wrap: wrap自动换行3. 子元素属性flex-grow剩余空间瓜分比例flex-shrink空间不足压缩比例flex-basis基准尺寸flex:1自适应填充剩余空间align-self单独设置自身对齐4. 实战场景导航栏、按钮组、卡片列表、左右自适应布局、居中布局、移动端自适应排版
返回列表