CSS3 flex布局的妙用

最新推荐文章于 2024-06-07 17:39:43 发布
最新推荐文章于 2024-06-07 17:39:43 发布
阅读量571 收藏 1
点赞数
分类专栏： CSS3 文章标签： flex css3 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niko_sch/article/details/52045882
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>flex布局</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="components/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
    <script src="components/bootstrap.min.js"></script>
    <script src="components/jquery.vide.js"></script>
</head>
<body>
<style>
    .father-container {
        background-color: #a8e4ff;
        padding: 50px 0;
    }

    /*dislpay:flex使父容器表现为块盒子;display:inline-flex使容器表现为行盒子*/
    .flex-container {
        display: flex;
    }

    .inline-flex-container {
        display: inline-flex;
    }

    .align-items-stretch {
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    .align-items-baseline {
        -webkit-align-items: baseline;
        align-items: baseline;
    }

    .align-items-center {
        -webkit-align-items: center;
        align-items: center;
    }

    .align-items-flex-start {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    .align-items-flex-end {
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    .justify-content-flex-start {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .justify-content-flex-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .justify-content-center {
        -webkit-justify-content: center;
        justify-content: center;
    }

    .justify-content-space-between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .justify-content-space-around {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    .center-container {
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    .element-autoheight {
        width: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;

    }

    .element-fixedsize {
        width: 50px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: bold;
        font-size: 2em;
    }

    .center-item {
        width: 50px;
        height: 50px;
        background: tomato;

    }

    .flex-container1 {
        padding: 0;
        margin: 5px;
        float: left;
        list-style: none;
        width: 160px;
        height: 300px;
        display: flex;
        flex-flow: row wrap;
        background-color: #a8e4ff;
        /*flex-direction:row;
        flex-wrap:wrap;*/
    }

    .flex-start {
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    .flex-end {
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    .flex-end li {
        background: gold;

    }

    .flex-end li:nth-child(3) {
        margin-bottom: 0;
    }

    .center {
        -webkit-align-content: center;
        align-content: center;
    }

    .center li {
        background: deepskyblue;
    }

    .space-between {
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    .space-between li {
        background: lightgreen;
    }

    .space-between li:nth-child(3) {
        margin-bottom: 0;
    }

    .space-around {
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    .space-around li {
        background: hotpink;
    }

    .stretch {
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    .stretch li {
        background: chocolate;
        margin-bottom: 4px;
        height: auto;
    }

    .stretch li:nth-child(3) {
        margin-bottom: 0;
    }

    .flex-item {
        background: tomato;
        margin-bottom: 5px;
        width: 160px;
        height: 80px;

        line-height: 80px;
        color: white;
        font-weight: bold;
        font-size: 1em;
        text-align: center;
    }
</style>
<div class="container">
    <h3>align-items</h3>
    <div class="col-md-12">
        <div class="col-md-4">
            <h4>stretch（拉升至等高）</h4>
            <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 100px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 70px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 90px;"></div>
                </div>

            </div>
        </div>
        <div class="col-md-4">
            <h4>baseline（子元素基线对齐）</h4>
            <div class=" inline-flex-container align-items-baseline" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 100px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 70px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 90px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h4>center（子元素垂直居中对齐）</h4>
            <div class="inline-flex-container align-items-center" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 100px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 70px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 90px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h4>flex-end（子元素对齐下边缘）</h4>
            <div class="inline-flex-container align-items-flex-end" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 100px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 70px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 90px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h4>flex-start（子元素对齐上边缘）</h4>
            <div class="inline-flex-container align-items-flex-start" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 100px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 70px;"></div>
                </div>
                <div class="element-autoheight">
                    <div style="height: 90px;"></div>
                </div>
            </div>
        </div>
    </div>
    <hr class="col-md-12">

    <h3>align-self</h3>
    <h4>和align-item一样，只不过是应用在子元素上（下面例子：改变align-item样式）</h4>
    <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
        <div class="element-autoheight">
            <div style="height: 50px;"></div>
        </div>
        <div class="element-autoheight">
            <div style="height: 140px;"></div>
        </div>
        <div class="element-autoheight">
            <div style="height: 70px;"></div>
        </div>
        <div class="element-autoheight" style=" -webkit-align-self: flex-end;align-self: flex-end;">
            <div style="height: 100px;font-size: 12px;">我本来是拉伸的，现在我和下边缘对齐了</div>
        </div>

    </div>
    <hr class="col-md-12">

    <h3>align-content</h3>
    <div style="float: left;padding-bottom: 20px;">
        <div class="flex-container1 flex-start">
            <div class="flex-item">flex-start</div>
            <div class="flex-item">flex-start</div>
            <div class="flex-item">flex-start</div>
        </div>

        <div class="flex-container1 flex-end">
            <li class="flex-item">flex-end</li>
            <li class="flex-item">flex-end</li>
            <li class="flex-item">flex-end</li>
        </div>

        <div class="flex-container1 center">
            <li class="flex-item">center</li>
            <li class="flex-item">center</li>
            <li class="flex-item">center</li>
        </div>

        <div class="flex-container1 space-between">
            <li class="flex-item">space-between</li>
            <li class="flex-item">space-between</li>
            <li class="flex-item">space-between</li>
        </div>

        <div class="flex-container1 space-around">
            <li class="flex-item">space-around</li>
            <li class="flex-item">space-around</li>
            <li class="flex-item">space-around</li>
        </div>

        <div class="flex-container1 stretch">
            <li class="flex-item">stretch</li>
            <li class="flex-item">stretch</li>
            <li class="flex-item">stretch</li>
        </div>
    </div>
    <hr  style="clear: both;">

    <h3>justify-content</h3>
    <div class="col-md-12">

        <h4>flex-start（左边缘对齐）</h4>
        <div class="flex-container justify-content-flex-start" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1</div>
            <div class="element-fixedsize">2</div>
            <div class="element-fixedsize">3</div>
            <div class="element-fixedsize">4</div>

        </div>
        <h4>flex-end（右边缘对齐）</h4>
        <div class="flex-container justify-content-flex-end" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1</div>
            <div class="element-fixedsize">2</div>
            <div class="element-fixedsize">3</div>
            <div class="element-fixedsize">4</div>
        </div>
        <h4>center（居中对齐）</h4>
        <div class="flex-container justify-content-center" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1</div>
            <div class="element-fixedsize">2</div>
            <div class="element-fixedsize">3</div>
            <div class="element-fixedsize">4</div>
        </div>
        <h4>space-between（等间距对齐，左右无间距）</h4>
        <div class="flex-container justify-content-space-between" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1</div>
            <div class="element-fixedsize">2</div>
            <div class="element-fixedsize">3</div>
            <div class="element-fixedsize">4</div>
        </div>
        <h4>space-around（等间距对齐，左右有间距）</h4>
        <div class="flex-container justify-content-space-around" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1</div>
            <div class="element-fixedsize">2</div>
            <div class="element-fixedsize">3</div>
            <div class="element-fixedsize">4</div>
        </div>
    </div>

    <hr class="col-md-12">








    <h3>子块完全置中(justify-content,align-items)</h3>
    <div class="father-container center-container col-md-6">
        <div class="center-item"></div>
    </div>
    <hr class="col-md-12">
</div>

</body>
</html>
niko_sch
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
0077 flex：flex-direction、justify-content、flex-wrap、align-content、align-items、flex-flow、align-self、or
maopolunzi的博客
12-28 646
移动web开发——flex布局 1.传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2. fl...
CSS3 flex布局之快速实现BorderLayout布局
12-13
【CSS3 Flex布局】是一种强大的网页布局解决方案，它允许开发者轻松地创建响应式和动态的用户界面。在Flex布局模式中，元素可以在容器内灵活调整大小和位置，以适应不同的屏幕尺寸和方向。相较于传统的布局方式，如...
个人总结flex各种用法【经典】
xuhuanchao的专栏
10-30 5087
//获得屏幕的分辨率var x:Number=Capabilities.screenResolutionX;var y:Number=Capabilities.screenResolutionY;Alert.show("x="+x+"y="+y);第二种方法Alert.show(stage.fullScreenWidth+"=="+stage.fullScreenHeigh
CSS-布局-flex
最新发布
weixin_40017062的博客
06-07 868
flex弹性布局
CSS3-flex布局
aizou6838的博客
03-05 141
一、Flex简介 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。 Flex 是 Flexible ...
浅撸 css3 flex 布局
好好学习
02-06 4466
放假无聊，五行缺撸，索性就这么撸篇博客咯，聊以自慰。 css3 中flex布局 即为弹性布局，在实现响应式，是非常好的。当然对于传统的position，float布局，如果完全只考虑移动端很大程度上能做到去float化了。但是pc端就不行，需要考虑到ie6，ie7，ie8。。。。具体看自己公司咯。这么要求，真像一个现代穿着比基尼的大胸女人，却还要要求她裹脚。。扯远了···· flex是用在父元...
flex布局常见用法小结
weixin_30384217的博客
06-21 136
1，display：flex 　　这个在父容器中声明； 2，flex-direction:row / column 　　默认为横向，也在父容器中设置，定义flex布局的主轴方向；一条轴为主轴，那么另一条轴自然而然就是副轴； 3，flex：1 　　在子元素中设置，表示所有的子元素不管内容如何，其宽度和高度都完全一样，且加起来刚好充满父容器； 4，align-items:center | ...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Css3的Flex布局
weixin_44573938的博客
01-19 388
Css3的Flex布局 开发工具与关键技术：DW 作者：汪秋霞 撰写时间：2019/1/18 我们在布置页面布局时，使用flex布局可以达到很好的页面效果。 Flex是flexible box的缩写，flex布局又称为弹性布局，可以为盒模型提供最大的灵活性，任何一个容器都可以通过display属性设置flex布局。而display属性又有fle...
css3的Flex布局
weiyangxiaoping的博客
05-14 252
弹性布局，为盒模式提供最大的灵活性 块状元素 .box {   display: flex;   display: -webkit-flex; }//容器 行内元素 .box {   display: inline-flex; } .item {}//项目 容器属性： flex-direction 主轴方向，row，row-rerverse ，column，column-reverse flex-
CSS3 flex布局
ZWTLF的博客
02-29 228
今天小编将把大家带入移动端的世界里去，让大家了解CSS flex布局，下面小编要发车了。 一、flex布局中子项排列方式 如图：首先要定义（display:flex;）一个父容器是flex弹性模型才能进行我们的下一布操作，其中我们可以看到flex-direction定义了主轴的排列方式row(默认)也就是从左往右、row-reverse从右往左、column从上往下、column-reverse...
css3的flex布局
baibaider的博客
02-22 597
1.Flexible boxes盒子按照宽高分出了以下 8 点：水平的主轴：main axis； 垂直的纵轴：cross axis；纵轴的开始位置和边框的交点：cross start；纵轴的结束位置和边框的交点：cross end；主轴的开始位置和边框的交点：main strat；主轴的结束位置和边框的交点：main end；单个项目占据主轴的空间距离：main axis；单个项目占据纵轴的空间距...
css3 flex布局
朝花夕拾的博客
04-16 265
.header-title { display: flex; font-size: 14px; padding: 1px 10px 1px 10px; flex-flow: row wrap; justify-content: center; align-items: center; } display: flex; flex-flow: row wrap; align-items: center; justify-content: c...
Css3 Flex布局
奇葩也是花
04-21 325
Flex 布局
CSS3之Flex布局
weixin_42130298的博客
05-07 372
1.Flex是什么？ Flexible Box 的缩写，意为"弹性布局"，任意一个容易都可以指定为Flex布局。 2.基本用法。 （1）display: inline-flex|flex; 其中设置为flex的容器被渲染成一个块级元素，而设置inline-flex的容器则被渲染为行内元素。 （2）采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"...
flex布局体验
罗彬桦的博客
02-27 734
flex布局 1.1 传统布局于flex布局 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex弹性布局 操作方便，布局集为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2 初体验 <!DOCTYPE html> <html lang="en"> <head>
CSS3弹性布局详解：flex使用指南
在CSS3中，flex布局是一种强大的工具，用于创建响应式和动态的网页布局。它允许开发者更灵活地控制元素的排列、大小和顺序，尤其是在不同屏幕尺寸下。这个布局模式是通过`display`属性引入的，当设置为`flex`时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值