什么是flex布局

  • flex是flexible Box的缩写,意味“弹性盒子”,用来为盒子状模型提供最大的灵活性
  • 任何一个盒子都可以指定为flex布局 .box{ display:flex }
  • 行内元素也可以使用flex布局 .box{ dispaly:inline-flex }
  • Webkit内核的浏览器,必须加上-webkit前缀
  •    display: -webkit-flex; /* Safari */
    display: flex;
  • 当我们为父盒子设置了flex布局之后,子元素的float,clear和vertical-align就失效了

传统布局和flex布局的差别

  • pc端的兼容较差,IE11或者更低的版本,不支持或者仅部分支持
  • 所以:
    • pc端页面布局,建议任然使用传统布局
    • 移动端或者不考录兼容性问题的PC端桌面布局,仍然使用flex弹性布局

flex布局初体验

  • 首先,行内元素是不能设置宽高的,如span
  • 但是,我们一旦给了父级元素设置了display:flex那行内元素也能设置宽高
  •       div{
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    }
    div span{
    margin-right: 10px;
    width:150px;
    height: 100px;
    background-color: blue;
    }
    <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>

flex布局原理

  • 采用flex布局的元素,称为flex容器,他的所有子元素自动成为容器成员,成为flex项目 (flex item)
  • 子容器可以横向排列,也可以纵向排列
  • 总结就是:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex布局父项常见属性

  1. flex-direction属性 (设置主轴和主轴方向)

    • row:x轴(从左到右)(默认属性)
    • row-reverse:翻转(从右到左)
    • column:y轴
    • column-reverse:翻转
  2. justify-content属性 (设置主轴上的子元素排列方式)

    • flex-start:从主轴头部开始排列(默认属性)
    • flex-end:从尾部开始
    • center:在主轴居中对齐
    • space-around:平分剩余空间
    • space-betwwen:先两边贴边,在平分剩余空间(重要)
  3. flex-wrap属性 (当子元素超出父元素时,是否换行)

    • nowrap:不换行,会改变原有子元素的大小,挤占进去(默认属性)
    • wrap:不换行,另起一行显示
  4. align-items属性 (设置侧轴上的的子元素排列方式(单行)) (默认是y轴)

    • flex-start:从上到下
    • flex-end:从下到上
    • center:垂直居中
    • stretch:拉伸(子元素没有设置高度时,这个为默认值)
  5. align-content属性 (设置侧轴上的子元素的排列方式(多行))

    • flex-start:在侧轴的头部开始排列(默认属性)
    • flex-end:在侧轴的尾部开始排列
    • center:在侧轴中间显示
    • space-around:子项在侧轴平分剩余空间
    • space-between:子项在侧轴先分布在两头,在平分剩余空间
    • stretch:设置子元素高度平分元素高度
  6. flex-flow属性 (flex-direction和flex-wrap属性的复合属性)

    • 如:flex-flow:column wrap;
    • 表示设置了flex-direction:column 和flex-wrap:wrap两个属性

flex布局子项常见属性

  1. flex属性 (定义子项目分配剩余空间,用flex来表示占多少份)

    • 为子元素样式设置:flex:number(默认为0)
    • 一般子元素不设置宽度,每个设置flex:1,因为没有宽度所以剩余空间为所有空间,所以每个子元素都占一份,就做到的子元素均分
  2. align-self属性 (控制某一个子项自己在侧轴上的排列方式)

    •   span:nth-child(2){
      /*设置自己在侧轴上的排列方式*/
      align-self:flex-end;
      }
  3. order属性 (定义项目的排列顺序)

    • 数值越小,排列越靠前,默认为0
    • 注意:和z-index不一样

flex布局使用的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

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

  10. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

  1. scikit-learn与数据预处理

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  2. 选择排序 C&&C++

    选择排序 选择排序即在每一步中选取最小值重新排列,从而达到排序的目的   流程: (1)先从原始数组选择一个最小数据和第一个位置交换 (2)剩下的n-1个数据选择最小的和第二个位置交换 (3)不断重复 ...

  3. 大数据学习笔记——Hive完整部署流程

    Hive详细部署教程 此篇博客承接上篇Hadoop和Zookeeper的部署教程,将会详细地对HIve的部署做一个整理,Hive相当于是封装在HDFS和Mapreduce上的一套sql引擎,只需要安装 ...

  4. IDEA+Maven 整合SSM框架实现简单的增删改查(新手入门,傻瓜操作)

    原博客地址:https://blog.csdn.net/khxu666/article/details/79851070 选用SSM框架的原因在目前的企业级Java应用中,Spring框架是必须的.S ...

  5. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  6. 在MySQL中group by 是什么意思

    mysql语法中group by是什么意思? 在百度中搜索半天,最后找到一篇解释比较好的(不是博文,是百度知道,很郁闷那么多网友怎么就没人解释的清楚),链接如下: http://zhidao.baid ...

  7. Maven——向Maven本地仓库中手动添加依赖包(ps:ojdbc.jar)

    maven中央仓库中并非包含所有现有的依赖包和插件,部分依赖包和插件需要手动地进行添加(如ojdbc.jar) 一.添加JDK系统环境变量(maven是基于Java的,可参考:https://www. ...

  8. CompareAndSwap原子操作原理

    在翻阅AQS(AbstractQueuedSynchronizer)类的过程中,发现其进行原子操作的时候采用的是CAS.涉及的代码如下: 1: private static final Unsafe ...

  9. WPF之实现控件内容拖动

    以下分别记录label.listbox.treeview三个控件的拖动示例: 1.对被拖动控件,实现拖动事件,主要是通过各种鼠标事件,实现DragDrop.DoDragDrop方法. 2.对于需要拖动 ...

  10. How to: Use the Entity Framework Code First in XAF 如何:在 XAF 中使用EF CodeFirst

    This topic demonstrates how to create a simple XAF application with a business model in a DbContext ...