flex是Flexible Box 的缩写，也称为弹性盒子布局，是css3语法中最大的亮点，下面web建站小编给大家详细介绍一个运用方法！
flex相应属性
diplay:flex //flex相关属性的默认定义 //相应属性 justify-content //主轴元素对齐方式 align-items //交叉轴元素对齐方式 flex-direction //设置主轴方向 flex-wrap //主轴一行满了换行 align-content //交叉轴行对齐方式 flex-flow //同时设置 flex-direction和 flex-wrap属性
justify-content
justify-content: center;//居中对齐 justify-content: space-between;//间距在子元素之间 justify-content: space-evenly;//主轴方向所有地方的间距都相等 justify-content: space-around;//间距加在子元素的两侧
align-items
align-items: center;//居中 align-items: stretch;//拉伸,默认值 align-items: flex-start;//将子元素在容器顶部对齐 align-items: flex-end;//将子元素在容器底部对齐
flex-direction
flex-direction: column;//主轴方向为垂直方向（从上到下） flex-direction: column-reverse;//主轴方向为垂直方向（从下到上） flex-direction: row;//主轴方向为水平方向（从左到右） flex-direction: row-reverse;//主轴方向为水平方向（从右到左）
flex-wrap
flex-wrap: nowrap;//默认值，不换行 flex-wrap: wrap;//换行，从上到下 flex-wrap: wrap-reverse;//换行，从下到上
align-content
align-content: stretch;拉伸,默认值 align-content: center;//居中对齐 align-content: space-around;//间距加在子元素的两侧 align-content: space-between;//间距在子元素之间
flex-flow
flex-flow: row wrap;
css3如何利用Flex实现响应式表格布局（Flex弹性布局）
标签： align-content, align-items, css3, flex, flex-direction, flex-flow, flex-wrap, justify-content
上面是“css3语法中Flex布局的基本介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_2639.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
