flex基本概念
基本使用
任何一个容器都可以指定为flex布局
.box {
display: flex;
}
行内元素也可以使用flex
.box {
display: inline-flex;
}
Webkit内核的浏览器,必须加上 -webkit
前缀
.box {
display: -webkit-flex;
disply: flex;
}
容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-conteng
- align-items
- align-content
flex-direction
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右边。(与row起点相反)
- column:主轴为垂直方向,起点在上沿。
- column:主轴为垂直方向,起点在下沿。(与column起点相反)
flex-wrap
默认情况下,项目都排在一条线(轴线)上。flex-wrap
用于定义,如果一条轴线排不下,如何换行。
- nowrap(默认):不换行
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。(与wrap相反)
flex-flow
该属性是 flex-direction
与 flex-wrap
的简写形式,默认为 row nowrap
。
justify-content
justify-cotent
属性定义了项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items
该属性定义项目在交叉轴上如何对齐
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline:项目的第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐
- flex-end:与交叉轴的终点对齐
- center:与交叉轴的中点对齐
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴
项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
定义项目的排列顺序。数值越小,排列越考前,默认为0。
flex-grow
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink
定义项目的缩小比例,默认为1,即如果空间不足,该项目缩小。
如果所有项目的 flex-shrink
属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的 flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis
定义在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
它的默认值为 auto
,即项目的本来大小。它可以设为跟 width
和 height
属性一样的值(比如350px),则项目将占据固定空间。
flex
flex-grow
,flex-shrink
,flex-basis
的简写,默认值为 0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
)和 none
(0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items
属性。默认为 auto
,表示继承父元素的 align-items
属性,如果没有父元素,则等同于 stretch
。
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
参考
flex基本概念的更多相关文章
- css新特性 box-flex/flex 弹性盒状模型
新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...
- 2017年总结的前端文章——一劳永逸的搞定 flex 布局
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...
- 转---30 分钟学会 Flex 布局
正文从这开始- Flex 基本概念: 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴, ...
- 一劳永逸的搞定 FLEX 布局(转)
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- 搞定flex布局
这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...
- 一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- Flex学习笔记
Flex —— Flexible Box 弹性布局 用来为盒子模型提供灵活性 /* 块级元素 */ .box{ display: flex; } /* 行内元素 */ .box{ display: i ...
- 30 分钟学会 Flex 布局
30 分钟学会 Flex 布局 有酒 617 人赞同了该文章 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的 ...
- flex布局整理以及demo
flex: 概念: flex容器: display:flex flex项: 轴:水平的主轴.垂直的交叉轴 容器的属性: 1. flex-direction(决定主轴的方向.即项目的排列方向) 1.1 ...
随机推荐
- Mac从零配置Vim
// 这是一篇导入进来的旧博客,可能有时效性问题. 1. 安装Homebrew (包管理器,用来安装Vim)& /usr/bin/ruby -e "$(curl -fsSL http ...
- IntelliJ IDEA 17和Maven构建javaWeb项目
前言 电脑又断电了,眼看着写好的东西就没有了,这是第二次犯这个错误了.很难受呀!还是回到正题吧,我们来使用IDEA和Maven构建一个JavaWeb项目 软件环境: IDEA:2017.2.1 JDK ...
- Java多线程学习开发笔记
线程有有序性和可见性 多个线程之间是不能直接传递数据交互的,它们之间的交互只能通过共享变量来实现. 在多个线程之间共享类的一个对象,这个对象是被创建在主内存(堆内存)中,每个线程都有自己的工作内存(线 ...
- 图的简单应用(C/C++实现)
存档: #include <stdio.h> #include <stdlib.h> #define maxv 10//定义最大顶点数 typedef char elem;// ...
- [bzoj1811] [Ioi2005]mea
还是比较好想到的..设第一个数为x,那么以后的所有数都能用x和M表示出来. 然后再根据非递减的限制条件得出x的取值范围. #include<cstdio> #include<iost ...
- UEP-自定义持久化类
HY-UEP提供了两种持久化方式:基于JPA的持久化机制和自定义持久化机制,JPA的持久化机制 比较符合现在的软件开发模式,支持各种主流数据库;自定义持久化时我们平台产品的特有持久化 机制的升级,在综 ...
- [国嵌笔记][004][Linux快速体验]
Linux文件系统 bin目录:可执行的程序 boot目录:与Linux启动相关的文件 dev目录:设备以文件的方式存放 etc目录:配置文件 home目录:用户文件 lib目录:与库相关的文件 ro ...
- 2017-6-14 踩坑小结(Android文件读写 相关问题)
填坑 getSlotFromBufferLocked: unknown buffer: 0xab7115e0 1. 在棉花糖(6.0)上莫名出现 未知缓冲 错误,百度了一下,貌似这个是Android6 ...
- Spark算子--mapValues
转载请标明出处http://www.cnblogs.com/haozhengfei/p/ccc9d6b5c46ac7209c1e104bd219bfb4.html mapValues--Transfo ...
- Spark算子--groupByKey
转载请标明出处http://www.cnblogs.com/haozhengfei/p/0e90fe79f9f2e4b91a5d8e659ee68eaf.html groupByKey--Transf ...