css flex布局

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量171 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Drizzlejj/article/details/121809810
版权

<!--

flex-direction

    row（默认值）：主轴为水平方向，起点在左端。

    row-reverse：主轴为水平方向，起点在右端。

    column：主轴为垂直方向，起点在上沿。

    column-reverse：主轴为垂直方向，起点在下沿。

   

justify-content

    flex-start(默认值):与main start对齐

    flex-end：与main end对齐

    center：居中

    space-between：flex items 之间的距离相等，与main start、main end两端对齐

    space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离

    space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

   

align-items

    决定flex items在cross axis上的对齐方式

    normal：在弹性布局中，效果和stretch一样

    stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)

    flex-satrt:与cross start 对齐

    flex-end:与cross end 对齐

    center:居中对齐

    baseline:与基准线对齐

 align-content

    决定了多行flex items 在cross axis的对齐方式 用法与justify-content相似 一个是横轴。一个控制竖轴

    stretch(默认值)：与align-items的stretch类似，当items有高度的时候，无效果

    flex-start:与cross start 对齐

    flex-end :与cross end 对齐

    center：居中对齐

    space-between:flex items 之间的距离相等，与cross start、cross end两端对齐

    space-evently: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离

    space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半


 

-->

<!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>Document</title>

    <style>

        #container{background-color: yellow;width: 600px;height: 500px;

        display: flex;justify-content: space-evenly;align-items: center;}

        .item{width: 100px;height: 100px;background-color: red;}

        span{width: 20px;height: 20px;border-radius: 50%;background-color: black;}

        .one{display: flex;justify-content: center;align-items: center;}

       

        .item-one{display: flex;justify-content: space-between;}

        .one_two{align-self: center;}

        .one_three{align-self: flex-end;}

        .item-two{display: flex;justify-content: space-around;}

        .three_one , .three_three{

            display: flex;flex-direction: column;justify-content: space-between;

        }

        .three_two{display: flex;flex-direction: column;justify-content: center;}

        .item-three{display: flex;justify-content: space-around;}

        #four , #four2{display: flex;flex-direction: column;justify-content: space-between;}

    </style>

</head>

<body>

    <div id="container">

        <section class="item one">

            <span></span>

        </section>

        <section class=" item item-one">

            <span></span>

            <span class="one_two"></span>

            <span class="one_three"></span>

        </section>

        <section class=" item item-two">

            <div class="three_one">

                <span></span>

                <span></span>

            </div>

            <div class="three_two">

                <span></span>

            </div>

            <div class="three_three">

                <span></span>

                <span></span>

            </div>

        </section>

        <section class=" item item-three">

            <div id="four">

                <span></span>

                <span></span>

                <span></span>

            </div>

            <div id="four2">

                <span></span>

                <span></span>

                <span></span>

            </div>

        </section>

    </div>

</body>

</html>

Drizzlejj
关注
css更改页面元素间距,CSS-Flexbox项目之间的间距
weixin_42520656的博客
08-03 1380
CSS-Flexbox项目之间的间距这就是我要的：我最近的。 将边距应用于flexbox项，然后从第一个和最后一个子项中删除一半。问题是:first-child在视觉上并不总是第一个，因为我可能会更改布局顺序(示例)。应用边距时，是否可以考虑视觉顺序？9个解决方案18 votes您可以尝试为所有框设置相同的边距，然后在容器上还原此边距：因此，替换为：.flex > * { margin: 0...
css 上下布局 flex,Css Flex布局
weixin_36398921的博客
08-03 3145
Flex布局是Css3中新加入的额外布局系统。传统布局基于盒模型，依赖“display”、“position”、“float”属性，对于特殊布局非常不便。因此2009年，W3C提出新的布局方案-Flex布局，但由于浏览器兼容问题，Flex布局并没有大范围铺开。实现Flex布局的条件1.必须有一个父级容器作为Flex容器(作为容器)·定义一个Flex容器.box{ display: flex; }2...
Css flex 布局
qq_54855933的博客
08-01 1798
css的flex布局
CSS Flex布局
m0_63977330的博客
04-11 2460
CSS Flex
css flex 布局换行
℡メ㏑╭ァ小凯
03-07 2457
加上这个就行了：flex: 1 0 calc(20% - 40px);/* 控制一行显示5个，设置间距为20px */，最后效果。默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;通过上面我们发现虽然时间换行了，但是每行的边距不一样。
深入理解 CSS Flex 布局
上进！努力！！！
08-27 1227
Flexbox，全称为 Flexible Box，是 CSS3 中的一种布局模型，旨在为容器中的子元素提供更有效的排列方式。与传统布局不同，Flexbox 布局不依赖于块或内联布局，而是基于“容器-项目”的关系进行布局控制。CSS Flex 布局是一个功能强大且灵活的工具，能够简化复杂的布局任务。通过理解和掌握 Flex 容器和项目的属性，你可以轻松地创建响应式和自适应的网页布局。
【CSS布局】Flex 布局
kakaai77的博客
04-07 1090
举例：当设置wrap时，第五个盒子设置的高度为auto，也就是交叉轴的方向（如果交叉轴方向为从左到右，实现效果需设置宽度为auto）​ 在标准流中，我们通过元素的前后顺序来给元素进行排序，在flex布局中，每个元素都有order属性，默认为0。flex flow是flex-direction和flex-wrap的简写，可以任意位置，并且都可以省略。单独对某个item设置，可以覆盖container中的align-items的设置。设置主轴的方向，主轴设置了，交叉轴也就设置成功了。​ 属性值更大的排在后面。
css flex布局自动换行
weixin_44076775的博客
05-18 9898
js display: flex; flex-flow: wrap display:flex 是弹性盒布局，flex-flow是盒子属性 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，设置子元素排列方式 flex-flow 属性设置子元素是否拆行或拆列。 flex-direction 属性设置子元素的方向。 !要是父元素即盒子没有设置display:flex,flex-flow属性是不能生效的 flex-flow 可设置的值有nowrap，wrap，wr
CSS flex布局 内容溢出
baby2008vox的博客
08-22 2187
flex布局中，容器（flex-container）内的项目（flex-item）内容过大，如 文字过长、图片过大等 ,会使容器（flex-container）变大，使布局错乱，不能达到设计效果，解决办法。这样容器（flex-container）就不会被动变大。溢出，想显示省略号…如果想忽略溢出内容，可以添加。
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 ... <div class=list></div> <div class=list></div> <div class=list></div> ...
css Flex布局的可伸缩性(Flexibility)
09-24
CSS Flex布局是一种强大的布局方式，具有很强的可伸缩性，能够适应不同屏幕大小和分辨率的设备。这种布局方式通过flex属性来控制元素的可伸缩性，使得元素可以根据容器的大小自动调整其宽度或高度。Flex布局的主要...
css flex布局 —— 项目属性 order
且听风吟的博客
10-17 1241
css flex布局 —— 项目属性 order
CSS-Day3
m0_74039531的博客
09-29 391
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 402
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 435
CSS 盒子属性
【CSS】position
最新发布
小秀的博客
10-02 326
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 244
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
css flex布局
04-05
CSS Flex布局是一种弹性盒子布局模型，它可以让容器中的子元素自动适应空间分配，并且可以轻松地实现对齐、排列和分布。 Flex布局中有两个重要的概念：容器和项目。容器是指包含Flex布局的父元素，而项目则是指容器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值