您的位置 首页 技术

CSS弹性盒模型flex在布局中的使用方法

CSS弹性盒模型flex在布局中的应用 元素居中 【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items <style>.paren…

CSS弹性盒模型flex在布局中的应用

元素居中

【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<style>.parent{    display: flex;    justify-content: center;    align-items: center;}</style><div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

【2】在伸缩项目上使用margin:auto

<style>.parent{    display: flex;}.in{    margin: auto;}</style><div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

两端对齐

<style>.parent{   display: flex;       justify-content:space-between   }</style><div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>    <div class="in" style="background-color: lightgreen;">DEMO</div>    <div class="in" style="background-color: lightcyan;">DEMO</div>        <div class="in" style="background-color: lightseagreen;">DEMO</div>      </div>

底端对齐

<style>.parent{    display: flex;    align-items: flex-end;    }</style><div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue; height:20px;">DEMO</div>    <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>    <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>    <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>      </div>

输入框按钮

<style>.inputBox{    display: flex;    width: 250px;}.inputBox-ipt{    flex: 1;}</style><div class="inputBox">  <input class="inputBox-ipt">  <button class="inputBox-btn">按钮</button></div>

等分布局

<style>body,p{margin: 0;}.parent{    display: flex;}.child{    flex:1;    height: 100px;}.child + .child{    margin-left: 20px;}</style><div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: lightblue;">1</div>    <div class="child" style="background-color: lightgreen;">2</div>    <div class="child" style="background-color: lightsalmon;">3</div>    <div class="child" style="background-color: pink;">4</div>                </div>

多列自适应布局

<style>p{margin: 0;}.parent{display: flex;}.left,.center{margin-right: 20px;}.right{flex: 1;}</style><div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>        <p>left</p>    </div>                <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>                <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>                    </div>

悬挂布局

<style>             .box{    display: flex;    background-color: lightgrey;    width: 300px;}.left{    margin-right: 20px;    background-color: lightblue;    height: 30px;}.main{    flex:1;} </style><div class="box">    <div class="left">左侧悬挂</div>    <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>    </div>

全屏布局

<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{    display: flex;    flex-direction: column;}.top,.bottom{    height: 50px;}.middle{    display: flex;    flex: 1;}.left{    width: 100px;    margin-right: 20px;}.right{    flex: 1;    overflow: auto;}.right-in{    height: 1000px;}</style><div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>     <div class="middle" style="background-color: pink;">        <div class="left" style="background-color: orange;">            <p>left</p>        </div>             <div class="right" style="background-color: lightsalmon;">            <div class="right-in">                <p>right</p>            </div>                    </div>                        </div>                  <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

以上就是CSS弹性盒模型flex在布局中的应用的全部内容。

相关参考:24课堂在线网

以上就是CSS弹性盒模型flex在布局中的使用方法的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/66123.html

为您推荐

返回顶部