css的布局属性(几种常见的css布局)

css布局-百分比布局

书写手机网页时，必须约束视口宽度（320-420左右）：

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /

width=device-width 约束视口

initial-scale=1.0 初始视口倍数是1倍

minimum-scale=1.0 最小允许视口宽度是1倍

maximum-scale=1.0 最大允许视口宽度是1倍

user-scalable=no 不允许用户缩放视口

书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。

一、百分比布局

width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。

height:高度的百分比是相对于父盒子height内容高的比。

padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。

border：不能书写百分数

子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；

height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）；

padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；

例：

div{ width: 50%; overflow: hidden; } p{ width: 50%; height: 100px; float: left; background-color: pink; } p:last-child{ background-color: green; }

二、box-sizing:border-box;

css2中的盒模型是外扩的。

css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）

例：

内减盒模型：书写的width、height就是盒子真正占有的宽和高。

讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！

三、弹性盒

display的属性值：block ,inline,inline-block,none;

-webkit-box:弹性盒容器。

例：

书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）

抽象公式：

四、固比固模型

固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。

例：1和3部分宽度是120px，2自动撑开。

1、利用浮动

2、绝对定位（推荐）

3、弹性盒

五、max-width 和 min-width

移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。

例：

CSS布局 + Flex布局

我们只会用到一点点儿CSS布局的属性，虽然少，但既然要用到，就得把它们总结在这里，搞明白。

在了解CSS布局的相关属性之前，我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子，每个盒子从内往外有三个部分：

组件的宽度和高度决定了它在屏幕上显示的尺寸，一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度，iOS里也是这样的。

我们可以通过 width 和 height 属性给一个组件设置固定的宽度，不过需要注意 这两个属性只能接收数值，不能带单位，这是因为RN要自己去适配安卓和iOS的单位。

在RN里，我们想让一个组件自适应宽高，要分两步。 首先我们要让该组件撑满它的父视图，即如果我们想自适应宽度，就得先让子视图的宽度撑满它父视图的宽度，如果我们想自适应高度，就得先让子视图撑满它父视图的高度，如果我们宽度和高度都想自适应，就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。

这里再对第一步做个解释， item的 flex: 1 属性可以让item在主轴上撑满它的容器，容器的 alignItems: 'stretch' 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧，我们再通过一个例子来说得明了点，RN里不是默认主轴为竖向、侧轴为横向嘛，我们就采取这个默认状态来举例子。 在RN里，默认主轴为竖向、侧轴为横向的状态下，如果我们想让某个组件自适应高度，就得首先在它自身上设置 flex: 1 属性，来让它的高度撑满它的父视图；如果我们想让某个组件自适应宽度，就得首先在它父视图身上设置 alignItems: 'stretch' 属性（当然默认就是这个值），这还不够，你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ；如果我们想让一个组件自适应宽高，则两者都得做。 当然，如果我们设置了主轴为横向、侧轴为竖向，其实也是一样的道理，自己捋一下就知道怎么做了。如果还是看不懂的话，没有关系，下面我们会详细谈到这几个属性，等你学了这几个属性，反过头来看这里就明白了。

Flex是Flexible Box的缩写，可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写，就译为弹性盒子布局，用来对一个盒子进行灵活的布局。

在了解Flex布局之前，我们得先了解一下Flex布局里的两对儿 重要的 概念。

采用Flex布局的组件，被称为Flex容器（flex container），简称容器（container）。

这个组件上的子组件，被称为Flex项目（flex item），简称item（项目）。

我们可以把容器和item看做是父视图和子视图的关系， 因此下文中的容器、父组件、父视图将是一样的概念，item、组件、子视图将是一样的概念，组件和视图将是一样的概念。

每个容器都有两根轴，一个是 主轴， 一个是 侧轴 。

容器里众多的 item自动沿主轴进行排列。

一个item在主轴方向上所占据的空间称为 main size ，一个item在侧轴方向上所占据的空间称为 cross size 。

RN里主轴的默认方向为竖向，侧轴为横向。 浏览器里主轴的默认方向为横向，侧轴为竖向，下面我们讲Flex布局的属性时会采用浏览器的状态，学会后对应到RN里，换个主轴方向就可以了。

用在容器上的属性，最常用的有 5个 ， 而且这些属性还都不是从来设置容器自己的布局，而是用来设置容器里item的布局。

flex-direction 属性用来设置主轴的方向，即容器里item自动排列的方向。 在浏览器里，主轴的方向默认为横向，所以 flex-direction 属性的默认值为 row 。

它有4种取值。

justify-content 属性用来设置item在主轴上的对齐方式。

它有5种取值。

align-items 属性用来设置item在侧轴上的对齐方式。

它有5种取值。

默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView ，不能滚动，怎么办呢？

flex-wrap 属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。

它有3种取值。

align-content 属性用来设置多条主轴的对齐方式， 如果项目只有一根轴线，该属性不起作用， 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。

它有6种取值。

用在item上的属性，最常用的有 2个 ， 这些属性都是用来设置item自己的布局。

在第1小节容器的属性，我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式，但如果其中某个item不想遵循这个对齐方式怎么办呢？我们会常见到这种场景，10个里有8个item是一样的对齐方式，就有1、2个item特立独行，那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。

align-self 属性用来设置单个item在侧轴上的对齐方式， 注意是给特立独行的单个item设置哦，而且是侧轴，它会覆盖它容器的 align-items 属性，当然如果不设置这个属性，默认值就为 auto ，即item会默认使用容器的 align-items 属性给它设置的对齐方式。

它有6种取值，除了 auto ，其他都与 align-items 属性完全一致。怎么说呢，item的 align-self 属性似乎是用来造反的，反抗它容器的 align-items 属性。

flex 属性接收一个整数值， flex 属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。

（1） flex 属性有三个用途

（2）使用 flex 属性需注意

iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。

当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。

当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。

下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

参考博客：

阮一峰的《Flex布局：语法篇》

阮一峰的《Flex布局：实例篇》

CSS flex布局

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）

他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位

每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end

容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size

flex布局下，容器和项目都有其各自的属性

决定主轴的方向，即决定项目的排列方向，其属性值有

决定了当一行放不下所有的项目时，其换行与否以及换行方式

定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心

在容器内具有多根主轴线时，可以定义这些轴线的对齐方式

align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致

定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层

设置了项目的放大比例，其默认值为1。

设置了项目的缩小比例，默认值为1。

在分配多余空间之前，为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。

那些不属于css的布局属性

list-style不属于css的布局属性。根据查询相关公开资料显示，css的布局属性有caption-side、border-collapse、border-spacing、empty-cells、table-layout。

CSS3-flex弹性布局之flex属性

flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（ flex：1 ）如就给容器内部项目设置的属性。

这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:

flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。

从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？

我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。

设置项目的收缩比例，如果空间不足，该项目将缩小。

默认值为 1。

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。

CSS3 弹性布局

flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性?display:flex;

一、容器属性

flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap;

⑴ flex-direction 子元素排列方向

flex-direction: row; 从左到右

flex-direction: row-reverse; 从右到左

flex-direction: column; 从上到下

flex-direction: column-reverse; 从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap; 不换行

flex-wrap:wrap; 换行

flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start;

justify-content: space-between;

3 align-items 子元素在交叉轴上对齐方式

align-items: center; 垂直方向居中

align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐

align-items: baseline; 项目的第一行的文字的基线对齐

align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

二、子元素属性（写在子元素下）

align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: stretch;

order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0;，可以为负值。

flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。

flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。

flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。

flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。

flex-shrink: 1; 默认值，即如果空间不足，缩小。

flex-shrink: 0; 不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。

如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。

链接：