弹性盒子源代码（子元素设置的相关属性）

已于 2024-05-07 16:37:48 修改
阅读量848 收藏 8
点赞数 7
文章标签： 前端 html css 开发语言
于 2024-05-07 16:23:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkaagf/article/details/138536362
版权
1.align-self
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 400px;
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);

            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;


        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            /* height: 100px; */
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
        }

        div:nth-child(2) {

            /* 
                align-self  设置子元素在侧轴上的排列方式

                auto  默认值  表示继承父元素的align-items属性，如果没有父元素则等同于stretch

                flex-start   从上到下
                flex-end   从下到上
                center   垂直居中
                stretch   拉伸
                baseline  


            */
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>

    </div>
</body>

</html>
2.flex-basis
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 800px;

            /* width: 800px; */
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);

            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
           

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            height: 100px;
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
        }

        div:nth-child(2){
            flex-basis: 300px;

            /* 
                flex-basis  子元素的基准值
                当主轴是横向的时候，flex-basis  代表宽度
                当主轴是纵向的时候，flex-basis  代表高度
            */
        }
      
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <!-- <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div> -->

    </div>
</body>

</html>
3.flex-grow
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 400px;

            width: 1000px;
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);

            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
           

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            /* height: 100px; */
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
            flex-grow: 1;
        }
        div:nth-child(2){
            flex-grow: 5 ;

            /*flex-grow 子项目延伸比率  */
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <!-- <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div> -->

    </div>
</body>

</html>
4.flex-shrink
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            /* height: 400px; */

            width: 500px;
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);

            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
           

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 300px;
            height: 100px;
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;

            
            flex-shrink: 5;
        }
        div:nth-child(2){
            background-color: aqua;
            flex-shrink: 1 ;

            /* 子项目收缩比率 */
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <!-- <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div> -->

    </div>
</body>

</html>
5.flex
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            /* height: 400px; */
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);

            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
           

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            height: 100px;
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;

            /*
                 flex ：flex-grow   flex-shrink   flex-basis

             */

            flex: 1 2  100px;
        }
        div:nth-child(2){
            flex: 2 2 100px ;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>

    </div>
</body>

</html>
地狱火牛战士
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性盒子详细版(效果加演示代码)
weixin_58447501的博客
03-29 1189
弹性盒子详细(效果加演示)
弹性盒子 容器属性
weixin_72636648的博客
08-17 377
自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）align-content: flex-start;/* 两端对齐，中间自动分配 */...
弹性盒子容器属性源代码
02-24
使用弹性盒子的容器属性写出的使用网页源代码，打开网页就是笔记，非常的方便。 使用弹性盒子的容器属性写出的使用网页源代码，打开网页就是笔记，非常的方便。 使用弹性盒子的容器属性写出的使用网页源代码，打开网页就是笔记，非常的方便。
css3代码整理—弹性盒子篇
weixin_30904593的博客
04-03 158
父级使用弹性盒子： #fu{ display:flex; } 父级中子级的对齐方式： 1.水平对齐方式：两端对齐 #fu　　{ display:flex; justify-content:space-between;} 2.水平对齐方式：作为个体，等分几份，在同一行内居中对齐 #fu 　　{ display:flex; justify...
Flex弹性盒模型常用代码
kevin661996的博客
08-30 511
Flex弹性盒模型 给谁添加display:flex 谁就是容器（功能使所有子元素在一行显示） 它的子元素就位项目 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 设置主轴方向 默认值 从左到右依次摆放 flex-direction: row; ...
CSS-弹性盒子
weixin_57936267的博客
05-16 102
/弹性盒子 影响： 1.子元素默认横向排列，但与浮动不同 2.行内元素，变成了块级元素，变得可以设置宽高了 3.在弹性盒子中，想要让其中的子盒子在水平和垂直方向居中，那么除了绝对定位之外，还可以直接加margin：auto； 写了之后，子盒子就直接显示在大盒子中间了
CSS3 弹性盒子(Flex Box)
qq_56607109的博客
06-18 461
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Fle
css实战手册源代码
05-17
2. **层叠与继承**：CSS中的层叠规则决定了哪些样式将被应用到一个元素上，而继承则允许子元素从父元素那里获取某些样式。在实践中，你会看到如何利用这两点来创建一致且可维护的布局。 3. **盒模型**：CSS盒模型是...
电子产品网络商城响应式网站模板HTML源代码
07-06
此外，CSS3在这个模板中扮演了重要角色，尤其是Flexbox（弹性盒子）和Grid（网格布局）两种布局模型。Flexbox适合处理一维布局，如导航栏、侧边栏或底部版权信息，而Grid则适用于二维布局，如产品展示区，能够灵活地...
HTML5+CSS3---弹性盒子模型
qq_45802159的博客
11-23 804
Flex 布局 Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、...
弹性盒子
qq_40704765的博客
01-31 2608
flex 1.display:flex;(写在父级元素的CSS样式中，其子级元素就会默认的同行排列),设置成flex之后，子级的浮动，clear，vertical-align 都将失效 2.弹性盒子的属性： ①flex-direction:排列方式，row(横向排列)、column(纵向排列)、row-reverse(横向反向排列)、column-reverse(纵向反向排列)
flex弹性盒子代码图片详细解释
qq_40322724的博客
05-26 468
一.开启了flex布局的元素叫做flex container flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布 al{ display: flex; } <div class="al"> <div class="z2">z2</div> <div class="cl">c1</div> <div class="z1"
JavaWeb-CSS的盒模型与弹性布局
st200112266的博客
05-14 1535
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.我们会发现盒子变大了,得出边框会撑大盒子的结论.那么怎么样才能使盒不会被边框撑大呢。可以看到内边距也会撑大盒子的,当然也可以使用box-sizing 属性进行修改.通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子。space-around -行均匀分布在容器中,两端各占一半。space-around -在行前行后行之间都留有空间。space-between -在行与行之间留有空间。
【HTML+CSS】弹性盒子
LuWeien的博客
12-05 2199
box-sizing: content-box padding和border不会撑大盒子 元素的总宽度=width+左右的margin width=width+左右的padding+左右的border 元素的总高度=height+上下的margin height=height+上下的padding+上下的border 弹性盒子 弹性盒子是什么？ 是一种布局方式 弹性盒子元素的大小 排版 顺序都受到父元素的影响和控制 灵活控制子元素在父元素中水平垂直对齐方式 给一个元素设置了display
flex布局（弹性盒子）–详谈（一）
最新发布
2302_78067597的博客
03-19 1569
所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了; 自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.flexbox在使用时, 我们最担心的是它的兼容性问题:我们可以在caniuse上查询到具体的兼容CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
CSS3
chuyaonong6148的博客
04-27 351
justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 各个值解析: flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边...
超详细！弹性盒子(display:flex)
热门推荐
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
CSS之弹性盒子Flexible Box
m0_74577714的博客
11-26 1117
我想大家在做布局的时候，没接触flex布局之前，大家都是用浮动来布局的，但现在我们接触了flex布局之后，我只能说：“真香”。让我为大家介绍一下弹性盒子模型吧！ Flexible Box 弹性盒子 在我们使用弹性盒子时，我们需要给父级添加display:flex; 这是没给父级添加display:flex;时的样子： 这是给父级添加了display:flex;时的样子： 大家看，这是不是浮动该做的事情呀，我们flex也可以做，而且可以更简单更轻松的完成我们的布局，让我为大家介绍一下吧！ 写在父级上常用的
在弹性盒子布局中，通过属性什么设置弹性子元素自身缩小比例
06-12
在弹性盒子布局中，可以通过`flex-shrink`属性设置弹性子元素自身缩小比例。该属性的默认值为1，表示当空间不足时，子元素会自动缩小以适应容器。若设置为0，则表示子元素不会缩小。若设置为一个大于1的数字，则表示子元素会比其他子元素更容易缩小。例如，若一个子元素的`flex-shrink`值为2，而另一个子元素的值为1，则当容器空间不足时，前者会比后者更容易缩小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值