CSS3之伸缩布局

时间  2019-12-11
标签 css3 css 伸缩 布局 栏目 CSS 繁體版
原文   原文链接

一 主轴方向html

在伸缩布局中, 默认伸缩项是从左至右的排版的布局

主轴的排版的方向默认就是row, 默认就是从左至右flex

 1.默认状况下主轴是水平方向的, 可是也能够修改成垂直方向.只要看到flex-direction: column/column-reverse就表明主轴被修改成了垂直方向spa

 2.若是将主轴修改成了垂直方向, 那么侧轴就会自动从垂直方向转换为水平方向3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>128-伸缩布局-主轴方向</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            /*
            在伸缩布局中, 默认伸缩项是从左至右的排版的
            */
            display: flex;
            /*
            主轴的排版的方向默认就是row, 默认就是从左至右
            */
            /*flex-direction: row;*/
            /*
            修改主轴的排版方向为从右至左
            */
            /*flex-direction: row-reverse;*/
            /*
            告诉系统把主轴的方向改成垂直方向
            注意点:
            1.默认状况下主轴是水平方向的, 可是也能够修改成垂直方向.只要看到flex-direction: column/column-reverse就表明主轴被修改成了垂直方向
            2.若是将主轴修改成了垂直方向, 那么侧轴就会自动从垂直方向转换为水平方向
            */
            /*
            修改主轴的排版方向为从上至下
            */
            flex-direction: column;

            /*
            修改主轴的排版方向为从下至上
            */
            /*flex-direction: column-reverse;*/
        }
        ul>li{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

二 主轴对齐方式code

 /*
            justify-content:
            用于设置伸缩项主轴上的对齐方式
            若是设置为flex-start, 表明告诉系统伸缩项和主轴的起点对齐
            */
            justify-content: flex-start;
            justify-content: flex-end;
            /*居中对齐*/
            justify-content: center;
            /*两端对齐*/
            justify-content: space-between;
            /*环绕对齐*/
            justify-content: space-around;

三 侧轴对齐方式htm

ul{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            /*
            经过align-items能够修改侧轴的对齐方式
            默认状况下是以侧轴的起点对齐
            */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            /*
            注意点:
            和主轴不一样的是, 侧轴没有两端对齐和环绕对齐
            */
            /*基线对齐*/
            align-items: baseline;
            /*拉伸对齐*/
            align-items: stretch;

        }

2 blog

若是在伸缩容器中经过 align-items 修改侧轴的对齐方式, 是修改全部伸缩项侧轴的对齐方式
若是是在伸缩项中经过 align-self 修改侧轴的对齐方式, 是单独修改当前伸缩项侧轴的对齐方式
align-self属性的取值和align-items同样排序

 ul>li:nth-child(1){
            /*padding-top: 50px;*/
            
            align-self: flex-end;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            align-self: center;
        }
        ul>li:nth-child(3){
            /*padding-top: 100px;*/
            background-color: yellow;
            align-self: flex-end;
        }

四 主轴侧轴的方向问题it

默认状况下主轴是水平方向, 侧轴是垂直方向
默认状况下主轴的起点在伸缩容器的最左边, 主轴的终点在伸缩容器的最右边
默认状况下侧轴的起点在伸缩容器的最顶部, 侧轴的终点在伸缩容器的最底部
咱们能够经过flex-direction属性修改主轴的方向
若是flex-direction属性的取值是column/column-reverse
就表明将主轴的方向修改成了垂直方向, 那么侧轴就会马上变为水平方向

ul{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
           
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

五 换行问题

在伸缩布局中, 若是伸缩容器的宽度不够, 系统会自动压缩伸缩项的宽度, 保证全部的伸缩想都能放在伸缩容器中
若是当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可让系统换行flex-wrap: wrap;

默认状况下若是伸缩容器的高度比换行以后全部伸缩项的高度还要高, 那么系统会自动将剩余空间平分以后添加给每一行

 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            

            /*宽度不够也不换行, 默认取值*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
        }
        ul>li{
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }
        ul>li:nth-child(1){

        }
        ul>li:nth-child(2){
            background-color: skyblue;
        }
        ul>li:nth-child(3){
            background-color: yellow;
        }
    </style>

六 换行的对齐方式

1 若是伸缩容器中的伸缩项换行了, 那么咱们就能够经过align-content来设置行与行之间的对齐方式

2 默认状况下换行就是就是拉伸对齐
必定要注意: 在换行中的拉伸对齐是指, 全部行的高度总和要和伸缩容器的高度同样
因此会将多余的空间平分以后添加给每一行

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 换行对齐方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            若是伸缩容器中的伸缩项换行了, 那么咱们就能够经过align-content来设置行与行之间的对齐方式
            */
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            /*
            默认状况下换行就是就是拉伸对齐
            必定要注意: 在换行中的拉伸对齐是指, 全部行的高度总和要和伸缩容器的高度同样
            因此会将多余的空间平分以后添加给每一行
            */
            align-content: stretch;
        }
        ul>li{
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }
        ul>li:nth-child(1){

        }
        ul>li:nth-child(2){
            background-color: skyblue;
        }
        ul>li:nth-child(3){
            background-color: yellow;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

七 换行的对齐方式

 若是想调整伸缩布局中伸缩项的顺序, 那么咱们能够经过修改伸缩项的order属性来实现

 默认状况下order的取值是0

 若是咱们设置了order属性的值, 那么系统就会按照设置的值从小到大的排序

 

 ul>li:nth-child(1){
            
            order:-1;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            order: 2;
        }
        ul>li:nth-child(3){
            background-color: yellow;
            order: 1;
        }

八 伸缩项放大比例

1.flex-grow做用:
当全部伸缩项宽度的总和没有伸缩容器宽度大的时, 咱们能够经过flex-grow让系统调整伸缩项的宽度,

以便于让全部伸缩项的宽度的总和等于伸缩容器的宽度

2.flex-grow计算公式
2.1计算剩余的空间
伸缩容器宽度 - 全部伸缩项的宽度
400 - 300 = 100
2.2计算每份剩余空间的宽度
剩余空间 / 须要的份数
100 / 6 = 16.66
2.3计算每一个伸缩项最终的宽度
伸缩项的宽度 + 须要的份数 * 每份的宽度

注意点:
flex-grow默认值是0，经过公式能够看出，0 不受影响

ul>li:nth-child(1){
             
            flex-grow: 1;
            /*100 + 1 * 16.66 = 116.66*/
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            flex-grow: 2;
            /*100 + 2 * 16.66 = 133.3*/
        }
        ul>li:nth-child(3){
            background-color: yellow;
            flex-grow: 3;
            /*100 + 3 * 16.66 = 149.8*/
        }

九 伸缩项缩小比例

1.flex-shrink做用:
当全部伸缩项宽度的总和比伸缩容器宽度大的时, 咱们能够经过flex-shrink让系统调整伸缩项的宽度, 以便于让全部伸缩项的宽度的总和等于伸缩容器的宽度

2.计算每一个伸缩项须要压缩的宽度
2.1计算溢出的宽度
伸缩容器的宽度 - 全部伸缩项的宽度总和
400 - 600 = -200
2.2计算总权重
每一个伸缩项须要的份数 * 每一个伸缩项的宽度
1 * 200 + 2 * 200 + 3 * 200 = 1200
2.3计算每一个伸缩项须要压缩的宽度
溢出的宽度 * 须要的份数 * 每一个伸缩项的宽度 / 总权重
-200 * 1 * 200 / 1200 = -33.33

注意点:
flex-shrink: 默认值是1 经过公式能够看出 flex-shrink等于0 的时候不受影响

ul>li:nth-child(1){
             
            flex-shrink: 1;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            flex-shrink: 2;
        }
        ul>li:nth-child(3){
            background-color: yellow;
            flex-shrink: 3;
        }

十 伸缩项放大缩小比例

若是有伸缩项没有设置flex-grow, 那么系统会保持原有的宽度（由于flex-grow默认就是0）
而会将多余的宽度等分以后, 按照每一个伸缩项须要的份数添加给它们
若是想让某个伸缩项不缩小, 那么须要将它的flex-shrink设置为0（由于flex-shrink默认为1）

 十一 伸缩项的宽度

若是是伸缩布局, 除了能够经过元素的width属性来设置宽度之外, 还能够经过flex-basis属性来设置伸缩项的宽度

注意点:
1.width属性能够设置宽度/flex-basis也能够设置宽度
那么若是二者同时存在, 系统会听flex-basis的
2.flex-basis属性是专门提供给伸缩布局使用的
3.若是同时经过这两个属性设置了宽度, 可是其中一个是auto, 那么系统会按照具体值来设置 

 ul>li:nth-child(1){
            
            flex-basis: 100px;
            /*width: 200px;*/
            width: auto;
            /*flex-basis: auto;*/
        }

十一 伸缩项属性简写

flex: flex-grow flex-shrink flex-basis;
默认值:
flex: 0 1 auto;

注意点: 在连写格式中, flex-shrink flex-basis是能够省略的

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程