响应式布局---盒子模型以及FLEX布局

2018-12-23  本文已影响0人  邓生的邓生

前言

时代在进步，人对美也有了更高的追求，对于物品的追求不再是简简单单的实用就行，对美观也是有所要求。web网站也是如此，当我们用不同的设备访问一个网站时，我们是希望网站呈现出的东西跟我的设备刚刚匹配，页面的排版、字体的大小、模板的布局就专门针对这个设备开发的APP一样。但是终端设备种类如此之多，如果针对一个设备就开发一种页面，那么程序员就不单单是头秃了。所以，响应式页面布局就来了。

正文

今天就从CSS3引入的box-sizing和Flex布局下手。

盒子模型

flex-01.jpg

上面就是一个盒子模型，下面是它的实现代码

div {
    width: 200px;
    height: 200px;
    border: 5px solid #ccc;
    padding: 20px;
    margin: 20px;
  }

我们最初设置这个div的宽高是200x200，但当我们设置padding和border以后却发现这个div实际的宽高变成了250x250,这样就有一个问题，在开发的过程必须要计算它的宽高，另外当开发一个响应式页面的时候，我们可能需要设置两个div的宽度都为50%，但是这个div有padding和border的时候，50%加50%再加上padding/border就大于整个页面的宽度，这不是我们所希望的结果。

为了解决上面的问题，CSS3引入了box-sizing属性

box-sizing

box-sizing: content-box|border-box|inherit;

再看一下上面的图，这个图就跟个城市规划图一样，有4个环，一环是content环，二环是padding环,三环是border环，四环是margin环，于是box-sizing的两个属性就对应图中的一环和三环。（二环属性被废弃了，四环属性还没生出来）

content-box其实就一个值border-box，其他两个并没什么用。当设置为border-box时，width/height属性设置的其实是三环的大小，而不是一环的大小，也就是说设置的宽高包含了padding、border、content

当我们在上面的代码中加一句

box-sizing: border-box;

就变成了这样

flex-02.jpg

它的一环content自适应变成了150

Flex布局

基本的概念图就不搞了，看的人一头雾水，图盲一枚

Flex容器

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>

上面的代码的html结构中，container就是容器，当设置display:flex时，它就变成了一个Flex容器，此时它的所有子项（item）的float、clear、vertical-align就失效了。

有六种属性可以设置在Flex容器上，作用于它的子项item

  1. flex-direction: row | row-reverse | column | column-reverse
    子项的排列顺序：横向 | 横向（从右向左）| 竖向 | 竖向（从下向上）
  2. flex-wrap: nowrap | wrap | wrap-reverse;
    子项超出容器宽度是否换行：不换 | 换 | 换行（换行后第二行在第一行的上面）
  3. flex-flow: <flex-direction> || <flex-wrap>;
    集合属性，没卵用，过
  4. justify-content: flex-start | flex-end | center | space-between | space-around;
    子项对齐方式：左对齐 | 右对齐 | 居中 | 两端对齐，项目之间有相等间隔 | 平分容器的宽度
  5. align-items: flex-start | flex-end | center | baseline | stretch;
    子项的垂直对齐：上对齐 | 下对齐 | 居中对齐 | 文字对齐 | 默认值（如未设置高度，会占满容器的高度）
  6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    这个属性跟justify-content相似，含义是轴线的竖向对齐方式，首先flex-wrap得设为为wrap，假如container宽度仅能容下两个item,那么两个item就在一根轴线上，那么上面代码中就存在三根轴线。这样以轴线为基本单位的实现方法就跟justify-content一致了，只不过一个在横向，一个在竖向。

子项item也有几个属性

  1. order: <integer>
    子项的顺序，数值越大越靠后，默认值0
  2. flex-basis: <length> | auto
    当设置这个属性以后，width属性就不起作用了，它的值可以是px也可以是%
  3. flex-grow: <number>
    项目的放大比例，默认值时0，当它的值不为0时，子项会等比放大填充满整个容器。同时这个属性也会覆盖width，flex-grow得值越大，其对应的子项宽度也越大

只有一个子项设置flex-grow后，它会填充容器所有的剩余空间

  1. flex-shrink: <number>
    项目的缩小比例，默认值1，当容器的宽度较小的时候，默认所有子项都要等比缩小的，但是当flex-shrink设置为0得时候，所有子项就会一直保持原来尺寸不变

只有一个子项设置flex-shrink为0的时候，其他子项会自动缩小，但它扔会保持原来尺寸

  1. flex: none | [<'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
    234属性其实都有一个共性，就是当某一个子项设置这三个属性值与其他子项不一致时，都会导致该子项的宽度与其他不一致，而且三个属性值设置不同时还会冲突，因此三个属性集合出来一个属性flex 
.item { flex : 0; }
// 相当于
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

算了，集合属性变换多端，还是分开写吧。

  1. align-self: flex-start | flex-end | center | baseline | stretch;
    这个属性跟容器的align-items一个东西，当子项设置align-self的时候会覆盖容器的align-items属性。

基础理论学习完毕，多实战练习，收工。。。

上一篇下一篇

猜你喜欢

热点阅读