flex超出换行

最新推荐文章于 2024-04-29 11:29:04 发布
最新推荐文章于 2024-04-29 11:29:04 发布
阅读量4.3w 收藏 9
点赞数 6
分类专栏： flex超出换行 文章标签： flex 超出换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40999917/article/details/79932152
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
         }
         /*flex里的项目是不脱离文档流的*/
         #hd{
             width:80%;
             border:4px solid orangered;
             height:500px;
             margin:10px auto;
             /*指定容器里的项目为弹性布局*/
             display: flex;
             /*默认不换行*/
             /*flex-wrap: nowrap;*/
             /*换行，第一行在上方*/
             flex-wrap: wrap;
             /*换行，第一行在下方*/
             /*flex-wrap: wrap-reverse;*/
         }
         #hd>div{
             width:180px;
             height:200px;
             background:dodgerblue;
             color:#fff;
             font-size:30px;
             margin-bottom:30px;
             text-align:center;
             border:1px solid purple;
            /*float:left;*/
         }
    </style>
</head>
<body>
    <!-- flex里的项目，总宽度不超过父级元素类似于flaot -->
    <!-- flex里的项目，总宽度超过父级元素，那么加给项目的宽度就无效了，每个项目的宽度会自动均分 -->
    <div id="hd">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</body>
</html>
盏茶作酒
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小程序flex:1_Flex 2：瞬间丰富的Internet应用程序！
culi3118的博客
08-03 610
小程序flex:1You may have heard some buzz recently about Adobe’s release of Flex 2. Flex is a collection of technologies that combine to give developers a strong framework for building Rich Internet Appli...
flex的比例和排序
memedadexixaofeifei的博客
01-01 308
flex的比例和排序 *{margin: 0;padding: 0;} .hd{width: 1200px; height: 500px; border: 2px solid cornflowerblue; margin: 40px auto; display: flex;} .hd>div{ width: 190px; height: 100px; border: 1px
flex布局写一行4个，超出换行
最新发布
Hanx_的博客
04-29 503
flex布局 一行4个内容，超出换行，宽度固定25%主要是这行： flex-wrap: wrap;页面展示：6个的时候。
flex超出宽度自动换行
咖啡如同生活的专栏
02-12 9113
效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
flex超出换行属性
热门推荐
qq_38215042的博客
01-16 1万+
flex-wrap: wrap;
详解flex实现左右布局中按钮溢出隐藏效果
09-22
`text-overflow: ellipsis`用于在文本溢出时显示省略号，`overflow: hidden`隐藏超出容器的元素内容，`white-space: nowrap`则防止文本换行，保持在一行内显示。 在文章给出的例子中，初始尝试是直接将这些样式应用...
CSS3新增布局之: flex详解
11-20
如果所有项目的尺寸之和大于容器，也不会超出父元素的宽、高度。不会换行(每个项目都会自动缩小相应的比例)。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
css3 flex实现div内容水平垂直居中的几种方法
11-21
一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐...※flex-wrap:nowrap （超出不换行，很奇怪里面的宽度会变成100%） ※ flex-wrap:wrap （超出按父级的高度平分） ※flex-
移动端开发
02-28
flex-wrap 当弹性子元素超出弹性容器范围时是否换行 flex-flow flex-direction和flex-wrap属性的快捷方式，复合属性 justify-content 主轴上的对齐方式 align-items 侧轴上的对齐方式 align-content 侧轴上有空白时...
Flex 布局新旧混合写法详解-兼容微信1
08-03
5. **box-lines**：定义子元素超出容器时是否允许换行。可用值为`single`（默认）和`multiple`。 接下来，我们看看子元素的属性： 1. **box-flex**：此属性决定了子元素是否可以伸缩以及伸缩的比例。使用浮点数值...
沿主轴控制Flex子元素的比例
让世界更美好！
03-15 4823
原文地址：Controlling Ratios of Flex Items Along the Main Axis 译者注： 在html中若一个元素的css设置为display: flex， 则这个元素就是flex container , 其子元素为flex item， 若是直译过来就是弹性容器和弹性项目 。 但是译者认为直译过来不好理解， 且不变记忆（就像我们常说TCP而不会说传输控制协...
flex布局和百分比布局~~~~
weixin_57320268的博客
02-12 7411
1 百分比布局 百分比布局， 也叫流式布局 百分比布局特点:宽度自适应，高度固定。 2 flex布局 flex布局极大的提高了我们布局的效率，更简单、灵活。 display: flex; 一定要给亲爸爸加。 2.1 主轴对齐方式 2.2 侧轴对齐方式 2.3 伸缩比 把父盒子分为若干份数，每个子盒子各占几份。 flex:1; 一定给子盒子加 语法： flex: 1; 比如有一个父盒子里面有三个子盒子，每个子盒子写 flex...
深入分析Flex布局空间分配
u012866052的博客
05-08 3864
Flex布局方案很适合应用与多栏等高布局场景，本文将深入分析flex-grow、flex-shrink，flex-basis三个属性,充分了解这些属性如何与增长和缩小的flex子元素一起工作是掌握Flex布局的关键所在。 flex语法 flex-grow、flex-shrink，flex-basis三个属性都是作用在flex子元素中，主要控制一个flex子元素的以下几个方面: flex-grow: 这个flex子元素得到多少剩余空间? flex-shrink: 从这个flex子元素要收缩多少空间? fle
记录一个flex布局下宽度溢出且不会换行的问题
百岁如流富贵冷灰的博客
09-17 3967
最近在开发当中遇到了一个属于浏览器的bug： 在flex元素下，如果子元素使用display：table并且设置宽度为100%时会出现超出flex元素的情况，并且设置flex-wrap：wrap属性也不会产生换行 <div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ
flex布局文本不换行不显示省略号的解决方法
weixin_30522095的博客
05-28 107
假如有这么一个元素，左侧是一个固定宽度头像，右侧是内容且内容一行显示不下。 <div class="main"> <img alt="" class="logo" src="pic.jpg"> <div class="content"> <h4 class="name">a name</h4&g...
vue水平布局1-用flex按比例排版
qq_43840793的博客
06-16 4839
水平布局的排版，运用flex实现
flex布局
weixin_47410267的博客
03-03 405
flex布局 父元素的属性： 设置父容器 display : flex; flex-direction 设置主轴的方向 flex-direction ： row； row 默认值 从左至右 row-reverse 从右至左 column-reverse | 从下至上 justify-content:设置主轴上子元素的排列方式 flex-start 默认值 flex-end 从尾部开始排列 center 在主轴居中 space-around 平分剩余空间 space-between
flex布局（2）
sunjunyue的博客
09-22 291
二、输入框布局（在做表单提交或者登录注册的时候回经常用到）html代码如下：<form method="post" class="form"> <input type="text" class="text"> <button class="btn">按钮</button> </form>css代码如下：.form{ display:flex; } .text,b
display flex 自动换行
02-27
display:flex是CSS中的一个属性，用于创建弹性布局。它可以让元素按照一定的规则自动换行。 当使用display:flex时，子元素会按照一定的规则排列在父容器内。默认情况下，子元素会在一行上排列，如果子元素的总宽度超过了父容器的宽度，那么子元素会被压缩以适应父容器的宽度。 如果希望子元素自动换行，可以使用flex-wrap属性。flex-wrap有三个取值： - nowrap：默认值，子元素不换行，会被压缩以适应父容器的宽度。 - wrap：子元素自动换行，超出父容器宽度的子元素会被放置到下一行。 - wrap-reverse：子元素自动换行，超出父容器宽度的子元素会被放置到上一行。 示例代码如下： ```css .container { display: flex; flex-wrap: wrap; } ``` 这样设置之后，当子元素的总宽度超过父容器的宽度时，子元素会自动换行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值