CSS布局模型学习(Float、Position、Flexbox)

标签：rap   lex   容量   适应   扩展   self   ber   lin   允许   

一、Float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

        清除浮动的方法：
            * 为父元素添加overflow:hidden，这样父元素就有高度了 ，父元素的高度便不会被破坏；
            * 浮动父元素
            * 通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。
            * （推荐）——clearfix——
           .clearfix { 
                 *zoom: 1; 
                 } 
          .clearfix:after { 
             display: table; 
             line-height: 0; 
             content: ""; 
          } 

二、Position
2.1、position: static
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会受到top，bottom,left,right的影响；

2.2、fposition:fixed——相对于窗口的固定定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置，不随着滚动条的移动而改变位置，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

2.3、position:relative——相对定位
相对定位是相对于元素默认的位置的定位。既然是相对的，就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

2.4、position:absolute——绝对定位
脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身

三、Flexbox
3.1 什么是flexbox?
Flexbox 是 flexible box 的简称（意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

                * 在不同方向排列元素
                * 重新排列元素的显示顺序
                * 更改元素的对齐方式
                * 动态地将元素装入容器

3.2 用float和position不能方便且灵活的实现的布局情况？

            * 在父内容里面垂直居中一个块内容。
            * 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
            * 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

3.3 flex 模型说明

在 Flexbox 模型中，有三个核心概念：
– flex 项（也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向（主轴）

        * 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
        * 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
        * 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
        * 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。

3.4 使用
1、创建flex容器
要创建一个 flex 容器，您只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度。
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>

.flex-container {
  display: flex;
}

2、将 flex 项排成一列
弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。
.flex-container { display: flex; flex-direction: column; }
可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。

3、靠右对齐的 flex 项
.flex-container { display: flex; justify-content: flex-end; }

回想一下，每个 Flexbox 模型都有 flex 方向（主轴）。justify-content 用于指定 flex 项在 flex 方向（direction）上的对齐位置。在上面的例子中，justify-content:flex-end 表示 flex 项在水平方向上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边。

4、居中对齐的 flex 项

.flex-container {
  display: flex;
  justify-content: center;
}

justify-content ——控制 flex 项在主轴上的位置，

                * 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
                * 也可以用 flex-end 来让 flex 项到结尾处。
                * center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
                *  space-around ——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
                *  space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

5、铺开的 flex 项
您可以通过使用以下 justify-content 属性的三个间距值之一来指定容器中 flex 项之间应显示多少空间：
space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。（该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持 ）
space-between : 任何两个相邻 flex 项之间的间距是相同的，但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。

6、flex 项在交叉轴上的对齐
通常，我们想沿着 flex 方向（主轴）排列 flex 项，还可以在垂直于它的方向（交叉轴）上对齐 flex 项。通过设置justify-content: center和align-items:center，可以使 flex 项水平和垂直放置在 flex 容器的中心。
.flex-container { display: flex; justify-content: center; align-items: center; }
align-items ——控制 flex 项在交叉轴上的位置，默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值

7、对齐某个特定的 flex 项
可以在某个特定的 flex 项上使用 align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进行对齐
<div class="flex-container">

    <div class="flex-item flex-bottom">1</div>

    <div class="flex-item">2 <br />2<br />2</div>

    <div class="flex-item">3 <br />3<br /> 3<br /> 3<br /> 3</div>

</div>

.flex-container {

    display: flex;

    justify-content: center;

    align-items: center;

}

.flex-bottom {

    align-self: flex-end;

}

8、换行
默认情况下， flex 项不允许多行/列排列，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中。

flex-wrap:wrap-reverse 仍然使 flex 项以多行/列排列，但是它们从 flex 容器的末尾开始排列的。

flex-flow 缩写：（ flex-direction 和 flex-wrap 的缩写 flex-flow）你可以将
flex-direction: row;
flex-wrap: wrap;
替换为
flex-flow: row wrap;

9、多行/列排列的 flex 项在交叉轴上的对齐方式
默认情况下，当 flex 容器的交叉轴（cross axis）上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴（cross axis）上的对齐方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）。

10、flex 项的动态尺寸

article {
  flex: 1;
}

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 <article> 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。
您还可以指定 flex 的最小值：
article {
flex: 1 200px;
}
这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。

11、flex: 缩写与全写
flex 是一个可以指定最多三个不同值的缩写属性：

                * 第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。
                * 第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 默认值为 1，当设置为0时，该 flex 项将不会被收缩。

比如
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
比例是1：2，意思是在收缩时，flex-item2收缩 1/3 ，而第二个项目flex-item3将被收缩 2/3 ；

                * 第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。
                * 建议不要使用全写属性，除非你真的需要（比如要去覆盖之前写的）。使用全写会多些很多的代码，它们也可能有点让人困惑。

12、设置元素的大小
                    flex-basis: 200px;
                    lex-basis: 10%;
    使用 flex-basis 定制 flex 项尺寸来代替元素的初始大小。默认情况下，其值为  flex-basis: auto，这意味该尺寸着从非 Flexbox CSS规则计算的。还可以将其设置为某个绝对值或相对于 flex 容器百分比的值;例如 flex-basis:200px 和flex-basis:10％

13、将 flex-grow, flex-shrink, 和 flex-basis 放在一起
         flex: 1 0 100px;

3.5 什么情况下不建议使用 Flexbox ？
虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：

                    * 整体页面布局
                    * 完全支持旧浏览器的网站

CSS布局模型学习(Float、Position、Flexbox)

标签：rap   lex   容量   适应   扩展   self   ber   lin   允许   

原文地址：https://www.cnblogs.com/cristina-guan/p/8999687.html