CSS布局相关及Flex详解

原创 2017年11月23日 20:55:05

float及postion缺点

对于两个div元素,其是相对独立的,如果在其中一个div元素中加入内容,将会使得两个元素的底部不能对齐,导致页面多出空白区域。

float布局问题

多栏布局

css3中加入了多栏布局,可以将一个元素中的内容分为两栏或者多栏显示,并且确保各栏中内容的底部对齐

<style>
#div1 {
  width: 500px;

  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;

  /* 给每栏设置宽度,但需要外部元素包裹*/
  /*column-width: 200px;*/
  /*-moz-column-width: 200px;*/
  /*-webkit-column-width: 200px;*/

  /*栏间距*/
  column-gap: 10px;
  -moz-column-gap: 1-px;
  -webkit-column-gap: 10px;

  /*间距线*/
  column-rule: 3px solid red;
  -moz-column-rule: 3px solid red;
  -webkit-column-rule: 3px solid red;
  }

  #div3 {
    width: 100%;
    height: 200px;
    background-color: #333;
  }
</style>

<div id="div1">
  <p>341343124312423143124231</p>
  <p>341343124312423143124231</p>
  <p>afewfew</p>
</div>
<div id="div3"></div>

多栏布局

使用多栏布局时,需要将元素的宽度设置为多栏的总宽度,使用float属性和position属性可以分别设置 。当然也可通过column-width设置每一栏的宽度而不设置总宽度,此时需要元素外面单独设立一个容器元素,然后指定该容器的宽度。

盒布局

<style>
  #container {
    display: -moz-box;
    display: -webkit-box;
  }

  #left, #right {
    width: 200px;
    background-color: yellow;
  }

  #content {
    width: 1000px;
    background-color: blue;
  }
</style>

<div id="container">
  <div id="left">
    <p>1</p>
    <p>2</p>
  </div>
  <div id="content">
    <p>1</p>
  </div>
  <div id="right">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
</div>

盒布局

盒布局可以解决float导致底部不对齐的问题;同时可以很好的规避多栏布局宽度必须相等的问题以及解决多栏布局不能指定什么栏中显示什么内容的窘境。

Flex容器

使用Flex布局,元素的宽度和高度具有自适应性,即元素的宽度和高度可以根据排列方向的改变而改变。

不设置高度,自动撑开

曲线图和表格在同一行,给图表设置最小高度:style={'min-height': 300px} ,给表格设置最大高度:max-height="500",可以完美解决对齐问题!

问题:图片下面会有空白存在,这是由于vertical-align: baseline;导致的。

<style>
  .test {
    background: red;
  }
  img {
    width: 50px;
    height: 50px;
  }
  span {
    background: white;
  }
</style>

<div class="test">
  <img src="https://sfault-avatar.b0.upaiyun.com/344/542/3445428434-5631776c183b2_huge256" alt="">
  <span>Xx</span>
</div>

vertical-align

上述问题,我们只需要将img的垂直对齐改为vertical-align: text-bottom即可实现。

需要注意的是:当时设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。所以也不会出现上述问题!

.container {
    display: flex | inline-flex;       //可以有两种取值
}

容器的属性

改变元素排列方向

flex-direction:决定主轴的方向(即项目的排列方向)

  • row(默认值):横向排列(主轴为水平方向,起点在左端)
  • row-reverse:横向反向排列(主轴为水平方向,起点在右端)
  • column:纵向排列,(主轴为垂直方向,起点在上沿)
  • column-reverse:纵向反向排列(主轴为垂直方向,起点在下沿)

容器是否换行

flex-wrap:决定容器内项目是否可换行

  • nowrap(默认值):不换行
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

flex-flowflex-directionflex-wrap 的简写形式,默认值为row nowrap

对齐方式

术语 解释
main axis(主轴) 基准轴。横向布局时为水平轴;纵向布局时为垂直轴
main-start/main-end 布局起点与布局终点。横向布局时为左端与右端;纵向布局时为顶端与底端
cross axis 垂直交叉轴。横向布局时为垂直轴;纵向布局时为水平轴
cross-start/cross-end 垂直交叉轴起点与终点。横向布局时为顶端与底端;纵向布局时为左端与右端

justify-content:定义了项目在主轴的对齐方式

  • flex-start(默认值):左对齐,从main-start开始布局所有子元素
  • flex-end:右对齐,从main-end开始布局所有子元素
  • center: 居中
  • space-between:将第一个子元素布局在main-start处,将最后一个元素布局在main-end处,将空白部分平均分配在所有子元素与子元素之间。
    flex-space-between
  • space-around:每个项目两侧的间隔相等;所以,项目之间的间隔比项目与边框的间隔大一倍
    flex-space-around

align-items:定义了项目在交叉轴上的对齐方式

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
    flex-align-items-center
  • center:交叉轴的中点对齐
    flex-align-items-center
  • baseline: 如果子元素的布局方向与容器的布局方向不一致,则该值得作用等效于flex-start属性值的作用。如果子元素的布局方向与容器的布局方向一致,则所有子元素中的内容沿基线对齐。
    基线
    注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。
  • stretch(默认值):同一行中的所有子元素高度被调整为最大。如果项目未设置高度或设为auto,将占满整个容器的高度

align-content:定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用

项目属性

改变排序顺序

order:定义项目在容器中的排列顺序,数值越小,排列越靠前,默认值为0,在不改变DOM结构的基础上实现重新排版!

<div id="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
  <div class="block">9</div>
</div>

flex-order

<div id="container-copy">
  <div class="block" style="order: 1">1</div>
  <div class="block" style="order: 4">2</div>
  <div class="block" style="order: 7">3</div>
  <div class="block" style="order: 2">4</div>
  <div class="block" style="order: 5">5</div>
  <div class="block" style="order: 8">6</div>
  <div class="block" style="order: 3">7</div>
  <div class="block" style="order: 6">8</div>
  <div class="block" style="order: 9">9</div>
</div>

定义项目缩放

  • flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

    <div id="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    </div>

    其中,container为flex布局,宽度1000px;a、b、c宽度都为100px;
    此时设置flex-grow属性如下:

    .a, .c {
    flex-grow: 1;
    }
    .b {
    flex-grow: 3;
    }

    剩余空间被均分5份:(1000-3*100)/(1+3+1)=140。a和c的宽度为:240,b的宽度为:520。
    flex-grow

    注意:如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
    flex-shrink同flex-grow属性,当子元素宽度(或高度)大于父容器元素的宽度(或高度)时,将溢出的宽度(或高度)均分;按照flex-shrink值的占比情况进行缩放。需要注意的是,缩放不能缩小为0。
    其中,container为flex布局,宽度1000px;a、b、c宽度都为1000px;

    .a, .c {
    flex-shrink: 1;
    }
    .b {
    flex-shrink: 3;
    }

    溢出空间被均分5份:(3*1000-1000)/(1+3+1)=400。计算获得a和c的宽度为:600,b的宽度为:-200。实际宽度如下图:
    flex-shrink

    注意:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

占据空间

  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间
    注意:将它设为跟width或height属性一样的值,则项目将占据固定空间。

    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。不设置高度(或宽度),自动撑开的原因!!!

Flex示例

示例:一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为500px,右边的div跟随浏览器大小变化(比如浏览器为1000,右边div为500,浏览器为2000,右边div为1500)

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 500px;
  width: 1000px;
}

.left {
  flex-basis: 500px;
  height: 100%;
  width: 500px;
  background-color: red;
}

.right {
  flex-grow: 1;
  height: 100%;
  background-color: blue;
}

calc()

calc()方法可以自动计算元素的宽度、高度等数值类型的样式属性值。

#container {
  width: 1000px;
  height: 50px;
  background-color: #e4b9c0;
}

#content {
  width: calc(50% - 100px);
  height: 50px;
  background-color: #00B7FF;
}

calc
将子元素content的宽度设置为父元素container元素宽度的50%-100px。
注意: calc可以对各种不同的计数单位进行混合运算。

版权声明:本文为博主原创文章,未经博主允许不得转载。转载请标明出处:http://blog.csdn.net/ligang2585116!

CSS3 弹性布局弹性流(flex-flow)属性详解和实例

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex...
  • iefreer
  • iefreer
  • 2016年02月24日 00:05
  • 19767

详解CSS中flex布局

flex布局详解
  • lzx_victory
  • lzx_victory
  • 2016年11月08日 11:56
  • 1115

css flex布局详解

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex 就是一种布局方式,类似于 block,inline-blo...
  • Liveinmylife
  • Liveinmylife
  • 2016年07月06日 14:56
  • 1666

css中flex:1弹性布局例子

#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex;...
  • disadministrator
  • disadministrator
  • 2017年01月19日 11:48
  • 1500

浅撸 css3 flex 布局

css3 flex box css 前端
  • ling369523246
  • ling369523246
  • 2016年02月06日 19:22
  • 3425

实现CSS等分布局的4种方式

转自:http://www.cnblogs.com/xiaohuochai/p/5456695.html 前面的话   等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布...
  • cometwo
  • cometwo
  • 2016年05月07日 16:39
  • 1747

CSS等高布局的6种方式

前面的话   等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及t...
  • cometwo
  • cometwo
  • 2016年05月04日 22:24
  • 8353

细说css3 flex布局之flex项目属性

在前篇博文中已经详细叙述了flex布局中的容器属性,那么现在就来谈谈flex项目属性那些事······ 以下6个属性是作用在flex项目上的: order flex-grow flex-shrink...
  • QiuDW_01
  • QiuDW_01
  • 2015年07月25日 22:26
  • 2886

【分享】css3最全flex布局,搞定移动端所有布局结构

寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文...
  • xiaoyan_2015
  • xiaoyan_2015
  • 2017年07月21日 10:27
  • 1298

CSS3 Flex布局详解与新旧法语对比

CSS Flex 新旧法语对比FlexBox 模型图解老版本的语法定义容器的display属性.box{ display: -moz-box; /*Firefox*/ display:...
  • shenlei19911210
  • shenlei19911210
  • 2016年09月08日 11:24
  • 2665
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS布局相关及Flex详解
举报原因:
原因补充:

(最多只允许输入30个字)