CSS-Flexbox

最新推荐文章于 2022-02-14 14:17:48 发布

cgl_zyw

最新推荐文章于 2022-02-14 14:17:48 发布

阅读量317

点赞数

分类专栏： css 文章标签： flex

本文链接：https://blog.csdn.net/cgl_zyw/article/details/78512644

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.基础概念

flex-container  //flex容器 显示声明为display:flex的父级元素
flex-items        // flex项目 flex容器内的子元素
PS：弹性元素是可以嵌套声明的，这意味着你可以为子元素再次声明display:flex来使之成为flex容器
Main-Axis //主轴 从左到右
Cross-Axis //侧轴 从上到下
PS：flex布局没有方向的概念，倒是更类似坐标轴（Y轴反向），只不过只有第四象限。

2.基础技巧-容器篇

a.flex-driection row || column || row-reverse || column-reverse // PS:默认是row
flex-driection属性其实是决定了子元素的排列方式，row是是横向排列沿着Main-Axis，column是沿着竖向排列沿着Cross-Axis。

这是row-reverse的效果图

这是column的效果图
column

b.flex-warp nowarp || warp || warp-reverse //PS:默认是nowarp
为了更好区分属性的左右，我们先保持flex-direction的属性不变，即默认的横向排列。
单说flex-warp的作用是决定子元素是否换行，为了更好的显示，我们又添加了5个li，同时将li元素的宽度从100px加到300px。

row + warp
warp
row + nowarp（默认的效果图）
nowarp
PS：注意到，为了保持不分行的样式，我们的子元素（li）的宽度其实没有我们设定的那么长（300px）
row + warp-reverse

那么column加上warp属性是什么效果呢？
下面为了让大家看清楚，我缩放了浏览器的显示比例，这是50%的效果。
column+warp

是不是和你设想的不一样，不要忘了浏览器的宽度没有限制，就好比说让你水平居中很简单，但是让你垂直居中很懵逼一样，我们给ul加上一个 height: 500px;的属性再看看。
定高+column+warp

类似的对比reverse有如下效果图：
column+warp-reverse

定高+column+warp-reverse

flex-flow

flex-flow 是flex容器中关于flex-direction和flex-warp的速记属性，类似于border：1px solid red;

flex-flow:column warp;

<=>

flex-direction:column;
flex-warp:warp;

justify-content flex-start || flex-end || center || space-between || space-around // 默认是 flex-start

<style type="text/css">
        ul{
            display: flex;
            border: 1px solid red;
            align-items: stretch;
        }
        li{
            list-style: none;
            width: 100px;
            height: 100px;
            background: #8cacec;
            margin: 8px;
        }
    </style>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>

从代码中我们可以看出，我们去掉上面的一些关于样式的设置：以便于更好的显示结果。
flex-start

flex-end

center
center
space-between

space-around

PS:1.注意到ul自带的padding-left：40px;
2.注意space-between和space-around的区别，between的头尾没有空隙。

align-items flex-start || flex-end || center || stretch || baseline//默认是stretch
修改HTML文档如下，并加入属性：word-wrap: break-word;同时去除对于li元素定高的设置：height：100px;

    <body>
        <ul>
            <li>list-item1</li>
            <li>list-item233</li>
            <li>list-item33娘</li>
            <li>list-item4444444444444444</li>
            <li>list-item555555555555555555555555555555555</li>
        </ul>
    </body>

接下来我们将会演示每个设置的效果，在开始之前你需要了解align-items是对于元素在cross-axis轴上的设置，而justify-content则是在main-axis轴上对于元素的排列，所以类比一下，你可以很容易的猜测大概是怎样的效果。
stretch
stretch
align-items默认的是stretch，也就是子元素的高度会填充整个父容器，那么这里我们没有设置父容器的高度，父容器ul的高度就是子元素中最高的li决定的，你可以试试让li的长度更长一些，你会看到所有的li都会变得更高。
flex-start

flex-end

center
center
上面的三个都很简单，可以类比justify-content的属性来理解。
baseline

这是baseline的属性样式，看起来好像和flex-start没有区别，于是我们将代码改成如下：

        <ul>
            <li style="font-size: 14px;">list-item1</li>
            <li style="font-size: 16px;">list-item233</li>
            <li style="font-size: 18px;">list-item33娘</li>
            <li style="font-size: 20px;">list-item4444444444444444</li>
            <li style="font-size: 24px;">list-item555555555555555555555555555555555</li>
        </ul>

baseline
你会看到第一行字的底线是对齐的。

f.align-content stretch || flex-start || flex-end || center //默认是stretch
修改代码如下：

    <style type="text/css">
        ul{
            display: flex;
            border: 1px solid red;
            flex-wrap: wrap;
            align-content: stretch;
            height: 400px;
        }
        li{
            list-style: none;
            width: 100px;
            /*height: 100px;*/
            background: #8cacec;
            margin: 8px;
            /*white-space: normal;*/
            /*word-break: break-all;*/
            word-wrap: break-word;
        }
    </style>
    <body>
        <ul>
            <li style="font-size: 14px;">list-item1</li>
            <li style="font-size: 16px;">list-item233</li>
            <li style="font-size: 18px;">list-item33娘</li>
            <li style="font-size: 20px;">list-item4444444444444444</li>
            <li style="font-size: 24px;">list-item555555555555555555555555555555555</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>

注意：这里我们给了父容器一个height：400px的属性。
stretch
stretch
注意:我们没有设定li子元素的高度，所以是由其内容决定的，然后可以看上下两行的元素高度延伸了相同的高度。
flex-start

flex-end

center
center

利用以上的属性，你可以组合出一些很有意思的布局，比如：
align-items:flex-start; align-content:flex-end

align-items:flex-start;
align-content:flex-end;

3.基础技巧-项目篇

a.order //默认为0
如果你以前使用过z-index，可以类比着记忆。
对于main-axis轴上的元素的排列，是按照从低到高排列的。

li:nth-child(2){
            order: 1;
}

order
b.flex-grow 0 || 1 //默认为0
默认设为0时，元素便不会延伸。
控制着元素在有空间时延伸，延伸的方向为我们父元素的flex-direction。
下面我们将容器高度设为400px；flex-firection：column;子项目高度设为10px;将li元素的flex-grow：1；

看到了吗？子元素在cross-axis方向延伸了。
c.flex-shrink 0 || 1 //默认为1
默认为1时，元素会在主方向上缩小，当空间不够时。
下面我们将主方向（父容器）flex-direction:row;
然后关闭子元素的缩小，即flex-shrink:0;加大长度到500px;

注意:以前子项目会缩小，现在不会了，所以下方出现了滚动条。
d.flex-basis auto || x px || x em //默认为auto
默认的auto是根据内容来计算长度。
这条属性设置了子项目在适应容器前的大小，如果你将flex-basis设置为150px，但是很有可能经过适应后会小于150px，因为flex-shrink是默认为1打开的。
对于上面的三条属性，可以速记为

flex 0 1 auto;
<=>
flex-grow:0;
flex-shrink:1;
flex-basis:auto;

e.align-self auto||flex-start||flex-end||center||baseline||stretch // 默认是auto
前面我们说过父容器可以通过align-items来设置子元素在cross-axis轴上的对齐方式，但是如果我们想单独的设置子元素的cross-axis对齐方式，就只需要用align-self来设置子元素。
因为前面已经讲述的很详细了，所以这里我只讲述一下auto属性，即让子元素继承父元素的align-items，如果父元素没有就设置为stretch。但是，你需要知道父元素容器align-items默认的也是stretch。

cgl_zyw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-Flexbox

1.基础概念flex-container //flex容器显示声明为display:flex的父级元素flex-items // flex项目 flex容器内的子元素PS：弹性元素是可以嵌套声明的，这意味着你可以为子元素再次声明display:flex来使之成为flex容器Main-Axis //主轴从左到右Cross-Axis //侧轴从上到下PS：flex布局没有
复制链接

扫一扫