css3语法中Flex布局的基本介绍

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弹性布局）

css3中justify-content属性的基本用法

css3如何实现文本显示指定内容（隐藏剩余内容）

css3实现鼠标移上去隐藏提示框由上到下滑动效果

js+css3做一个灯泡开灯关灯效果

标签： 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，我们会在看到邮件的第一时间内为您处理！