一、  弹性布局

  一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下。

  在平时的我们常用的布局类型有以下几种:

  1.浮动+定位

  2.自适应(百分比)

  3.响应式布局

  4.弹性布局(Flex布局)

  今天所要整理的就是比较常用的弹性布局,但块标签与行内块标签是有区别的。

div{
display:flex;
}
input{
  display:inline-flex;
}

  当然不是所有的东西都能像钱一样让所有人都喜欢,它也有自己的优缺点。

  优点:兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-),可以随用户的喜好进行调节,可以将任何一个容器指定为Flex布局。

  缺点:因为弹性布局可调节,所以有巨大的可能性,需要花很多的时间进行调整;有些弹性设计要为IE6单独设计样式,不过……IE6还有多少人在用(⊙﹏⊙)b。

  注意:当我们使用了弹性布局,那么在CSS里的float、clear和vertical-align就会失效。

二、  弹性布局的属性

  首先是作为弹性布局的容器的属性。  

  1.flex-direction属性

  flex-direction决定了容器的方向。

div {
flex-direction: row | row-reverse | column | column-reverse;
}

  四个值分别为:row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

  2.flex-wrap属性

  默认情况下的布局一般在同一行,当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

div{
flex-wrap: nowrap | wrap | wrap-reverse;
}

  四个值分别为:nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

  3.flex-flow属性

  flex-flow属性是以上两种属性的简写形式,默认值是row nowrap。

div {
flex-flow: <flex-direction> || <flex-wrap>;
}

  

  4.justify-content属性

  justify-content属性定义了在容器方向上的对齐方式。

div {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

  flex-start(默认值):向左对齐。

  flex-end:向右对齐。

  center: 居中对齐。

  space-between:两端对齐,每一个子元素等距离间隔,子元素与容器边框无间隔。

  space-around:每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

  5.align-items属性

  align-items属性定义在垂直容器方向上的对齐方式。

div {
align-items: flex-start | flex-end | center | baseline | stretch;
}

  flex-start:垂直方向的起点对齐。

  flex-end:垂直方向的终点对齐。

  center:垂直方向的中点对齐。

  baseline: 与第一个子元素中文字的基线对齐。

  stretch(默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。

  6.align-content属性

  align-content属性定义了子元素两种方向上的对齐方式。

div {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

  flex-start:当容器方向子元素刚好填满时,与垂直方向的起点对齐。

  flex-end:当容器方向子元素刚好填满时,与垂直方向的终点对齐。

  center:当容器方向子元素刚好填满时,与垂直方向的中点对齐。

  space-between:当容器方向子元素刚好填满时,垂直方向两端对齐,子元素之间的等距离间隔。

  space-around:两个方向两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

  stretch(默认值):占满整个垂直方向。

  下面就是具有弹性布局容器中子元素的属性

  1.order属性

  order属性定义了子元素的排列顺序,数值小的在前。

.son {
order: <integer>;
}

  

  2.flex-grow属性

  flex-grow属性定义了子元素的放大比例,默认值为0。

.son {
flex-grow: <number>; /* default 0 */
}

  当给所有子元素设置该属性为1,那么将等分所有空间,如果单独给某一个子元素设置n倍,那么该子元素将占据的空间比其他子元素多n倍。

  

  3.flex-shrink属性

  flex-shrink属性定义了子元素的缩小比例,默认值为1。

.son {
flex-shrink: <number>; /* default 1 */
}

  给所有子元素设置该属性为1,当空间不足时那么所有子元素将等比例缩小平分所有空间,如果单独给某一个子元素设置0,那么该子元素将在空间不足时不缩小。

  

  4.flex-basis属性

  该属性定义了给子元素分配空间时其占据的空间为多少,可以设置为与其width和height属性一样的值,那么它将被分配固定的空间大小。

  

  5.flex属性

  该属性为flex-growflex-shrink 和 flex-basis的简写。

  6.align-self属性

  该属性允许设置过的子元素有与其他子元素不一样的对齐方式,可以覆盖align-items属性。

.son {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

  auto:默认值,表示默认继承父级的align-items属性。

  flex-start:垂直方向的起点对齐。

  flex-end:垂直方向的终点对齐。

  center:垂直方向的中点对齐。

  baseline: 与第一个子元素中文字的基线对齐。

  stretch(默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。

弹性布局(Flex布局)整理的更多相关文章

  1. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  2. 响应式布局(CSS3弹性盒flex布局模型)

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  3. CSS布局-flex布局入门教程

    前言 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 查询兼容 F ...

  4. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  5. css3弹性盒子 flex布局

    CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...

  6. 经典的横线中间文字css布局---flex布局

    html: <div class="title"> <div class="line"></div> <div cla ...

  7. flex布局(弹性布局)

    1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...

  8. flex布局使用

    什么是flex布局 flex是flexible Box的缩写,意味"弹性盒子",用来为盒子状模型提供最大的灵活性 任何一个盒子都可以指定为flex布局 .box{ display: ...

  9. flex布局开发

    flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...

  10. flex 布局方式

    开始啦 1. flex-direction 有关主轴的对齐方式 column 自上到下 row 自左到右 -->默认值 row-reverse 自右到左 column-reverse 自下到上 ...

随机推荐

  1. 对于get系列className的不兼容

    function getClass(param){ if(id.getElementsByClassName){ return id.getElementsByClassName(param); }e ...

  2. Shift键的三个妙用!Word又现神操作!

    1.Shift+Alt+上下方向键 :调整段落顺序 同时按这三个键,能够调整段落的顺序,也可以用来调整表格中的行序. 2.Shift+F3:英文大写/小写/首字母大写,这三种模式切换 PS:如果中间夹 ...

  3. oracle addm报告

    可通过@?/rdbms/admin/addmrpt.sql生成ADDM报告 ADDM本身并不是很实用,抽象级别太高,用于初步判断系统配置/IO子系统是否合理和快速参考,一个报告截图如下: 任务 '任务 ...

  4. python 排序算法

    冒泡排序: 一. 冒泡排序的定义 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进 ...

  5. Python爬虫——你们要的王者荣耀高清图

    曾经144区的王者 学了计算机后 头发逐渐从李白变成了达摩 秀发有何用,变秃亦变强 (emmm徒弟说李白比达摩强,变秃不一定变强) 前言 前几天开了农药的安装包,发现农药是.Net实现的游戏 虽然游戏 ...

  6. 【Python游戏编程01--初步认识pygame】

    一.pygame简介 Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上开发.允许你在 Python 程序中创建功能丰富的游戏和多媒体程序,Pygame 是一个高 ...

  7. ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

    centos7.5 使用into outfile备份失败 问题: mysql> select * from world.city into outfile '/tmp/world_city.da ...

  8. 微生物组学数据分析工具综述 | 16S+宏基因组+宏病毒组+宏转录组--转载

    转载:https://mp.weixin.qq.com/s/xsL9GuLs7b3nRF8VeRtinQ 建立在高通量测序基础上的微生物群落研究,当前主要有三大类:基于16S/18S/ITS等扩增子做 ...

  9. JQuery学习二-字典操作

    1. 数组中添加map var arr = []; var key = 'Jeremy'; var value = '!!!!' arr.push({ 'key': key, 'value': val ...

  10. Windows Server 2008环境下Apache2.4+Tomcat8配置

    安装步骤 1. 安装配置JDK2. 安装配置Apache3. 安装配置Tomcat4. 启动服务并测试 一.Apache安装与配置 1.Apache解压在D盘根目录下建立一个文件夹Apache Gro ...