flex 布局
来源:互联网 发布:免费申请域名建立网站 编辑:程序博客网 时间:2024/06/05 17:45
Flex 布局,可以简便,完整,响应式的实现各种页面布局
网页布局是CSS中一个重点应用,传统的解决方案是基于盒模型的,它依赖于 标准文档流、浮动布局 和 定位布局。但它在解决一些特殊布局的时候会很不方便,让人很头疼。
Flex 布局
Flex 是 Flexible Box 的缩写,即弹性布局,任何一个容器(块状元素或行内元素)都可以指定为Flex布局。
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效
基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴,水平轴和垂直的交叉轴。
属性
Flex container 的属性 :
1. display : flex; // 将这个元素设置为弹性盒子2. flex-direction : // 主轴方向,即项目的排列方向 . row . row-reverse . column . column-reverse3. justify-content : // 沿主轴的对齐方式 . flex-start 默认,左对齐 . flex-end 右对齐 . center 居中 . space-between 两端对齐,项目之间的间隔相等 . space-around 每个项目两侧的间隔相等4. align-items : // 沿侧轴的对齐方式 . flex-start 起点对齐 . flex-end 终点对齐 . center 中点对齐 .baseline 项目的第一行文字的基线对齐 . stretch 默认值,如果项目未设置高度或设为auto,将占满整个容器的高度 5. align-content : // 子元素中文本沿侧轴的对齐方式(只有一行时无效) . flex-start 起点对齐 . flex-end 终点对齐 . center 中点对齐 . space-between 两端对齐,间隔平均 . space-around 每根轴线两侧相等,轴线之间的间隔比轴线与边框的间隔大一倍 . stretch 默认值,轴线占满整个侧轴6. flex-wrap : // 规定如果一条轴线排不下怎么换行 . nowrap 默认,不换行 . wrap 换行,第一行在上面 . wrap-reverse 换行,第一行在下面 7. flex-flow // flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
Flex item 的属性 :
1. flex-growth : // 伸展值, 默认为0,如果所有的都为1,则等分空间2. flex-shrink : // 可接受的压缩值,默认为1,设为0则不缩小3. flex-basis : // 元素默认的尺寸值4. flex : // 以上三个值按顺序的缩写5. order : // 项目的排列顺序。数值越小,排列越靠前,默认为06. align-self : // 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto
示例 :
效果如下 :
该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io/
阅读全文
0 0
- Flex布局
- flex布局
- Flex 布局
- flex布局
- Flex 布局
- Flex布局
- Flex布局
- Flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- Flex布局
- Flex布局
- STL中的vector学习笔记
- 用vb.net开发的简易(通用)上位机
- Android资源获取方式
- 51Nod-1582-n叉树
- RH134-第十七节-定时任务和延时任务
- flex 布局
- 解决使用ssm框架javaweb项目的乱码问题
- iOS 关于屏幕截图,获取webView高度,截取长图
- 软硬连接,find,locate命令
- MapReduce 开发手册
- scala abstract type及 properties相关知识
- C++学习笔记 基本数据类型
- HDFS常用命令
- Spring事务管理