弹性盒子学习笔记

最新推荐文章于 2024-01-07 23:07:16 发布

Three Big Stones

最新推荐文章于 2024-01-07 23:07:16 发布

阅读量337

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/dandingwangzi/article/details/128421868

版权

1、什么是弹性盒子？

弹性盒子是一种用于按行或列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

2、弹性项

弹性盒子的子元素称为弹性项。

3、弹性盒子常用属性设置

属性名称	属性值	描述
display	flex	将元素标记为属性盒子
flex-direction	column	盒子中的元素按列垂直布局
	row	按行横向排列
	row-reverse	水平方向反向排列
	column-reverse	垂直方向反向排列
flex-wrap	nowrap	不换行，所有项在一行
	wrap	换行排列，从上往下排
	wrap-reverse	换行排列，从下往上排
flex-flow	column wrap	垂直换行排列，是flex-direction 和flex-wrap的简写
justify-content	flex-start	从盒子方向的起始位置开始排列元素
	flex-end	从盒子方向的结尾开始排列
	center	在盒子方向的中心位置排列
	space-between	弹性项分布在盒子的方向上，第一个弹性项在盒子的开始位置，最后的弹性项在盒子的结束位置
	space-around	弹性项在盒子方向间隔均匀分布
align-items	stretch \| flex-start \| flex-end \| center \| baseline	弹性项在盒子中的对齐方式
gap	10px	弹性项之间的距离
row-gap	10px	行之间的距离
column-gap	10px	列之间的距离

4、弹性项常用属性设置

属性名称	属性值	描述
order	1	弹性项的顺序，数值越大，越往后排列
flex-grow	1	盒子中的元素占多少等份的大小
flex	1 80px	元素至少80px的大小，然后按相同尺寸分布，`flex-grow,` `flex-shrink和flex-basis的简写`
align-self	auto \| flex-start \| flex-end \| center \| baseline \| stretch;	定义元素自身的对齐方式

案例：

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 0 — starting code</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            margin: 0;
        }

        header {
            background: purple;
            height: 100px;
        }

        h1 {
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }

        article {
            padding: 10px;
            margin: 10px;
            background: aqua;
            flex: 200px;
        }

        /* Add your flexbox CSS below here */

        section {
            display: flex;
            /*flex-direction:column;*/
            /*flex-wrap: wrap;*/
            flex-direction:row-reverse;
            flex-flow:row wrap;
        }

        article{
            flex:1 200px;
        }

        article:nth-child(3)
        {
            flex:2 200px;
        }

    </style>
</head>
<body>
    <header>
        <h1>Sample flexbox example</h1>
    </header>

    <section>
        <article>
            <h2>First article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
        </article>

        <article>
            <h2>Second article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
        </article>

        <article>
            <h2>Third article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>

            <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
        </article>
    </section>
</body>
</html>