CSS弹性盒模型flex在布局中的应用_html/css_WEB-ITnose

<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>

<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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2007">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cf21129f9332.png" alt="无阶未来模型擂台/AI 应用平台">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2007">无阶未来模型擂台/AI 应用平台</a>
                            <p>无阶未来模型擂台/AI 应用平台，一站式模型+应用平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="无阶未来模型擂台/AI 应用平台">
                                <span>35</span>
                            </div>
                        </div>
                        <a href="/ai/2007" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="无阶未来模型擂台/AI 应用平台">
                        </a>
                    </div>
                        <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>