成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

學(xué)習(xí)關(guān)于display ：flex 布局問(wèn)題！

番茄西紅柿 / 1381人閱讀

摘要：什么是呢答是的縮寫，意為彈性布局這個(gè)東西的引入，為盒模型提供了最大的靈活性可以相應(yīng)式的實(shí)現(xiàn)各種頁(yè)面的布局?；靖拍畈捎貌季值脑兀Q為容器，簡(jiǎn)稱容器。在這個(gè)容器中默認(rèn)存在兩個(gè)軸水平方向的主軸和垂直方向上的交叉軸。

  • 很多人不明白這個(gè)display:flex是到底是什么東西，如何使用的  。

1.什么是display：flex呢？

答：flex是 flexible  box的縮寫，意為彈性布局 ；這個(gè)東西的引入，為盒模型提供了最大的靈活性！可以相應(yīng)式的實(shí)現(xiàn)各種頁(yè)面的布局。

 

基本概念

采用flex布局的元素，稱為flex容器(flex   container)，簡(jiǎn)稱容器。    在這個(gè)容器中默認(rèn)存在兩個(gè)軸：水平方向的主軸（main axis）和 垂直方向上的交叉軸（cross axis）。

圖： （摘自：他人博客）

以下6個(gè)屬性設(shè)置在容器上：

    •  flex-direction   容器項(xiàng)目的排列方向（默認(rèn)是橫向排列）
    • flex-wrap      容器內(nèi)項(xiàng)目的換行方式
    • flex-flow      flex-direction 和 flex-wrap 屬性的復(fù)合屬性。
    • justify-content   項(xiàng)目在主軸上對(duì)齊樣式
    • align-item　　項(xiàng)目在交叉軸上如何對(duì)齊
    • align-content   定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用

 

 注意：    如果元素不是彈性盒對(duì)象的元素，則flex-flow 屬性是不起作用的；

 

 

屬性值

用法

 

DOCTYPE html>
DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Titletitle>
    <style>
        .father {
            width: 500px;
            height: 100px;
            background-color: red;
            display: flex;
            flex-flow:row;
        }

        .box1 {
            flex: 3;
            background: blue;

        }
        .box2{
            flex: 2;
            background: pink;
        }
    style>
head>

<body>
    <div class="father">
        <div class="box1">div>
        <div class="box2">div>
    div>
body>

html>

 

 

 

 以上僅是我個(gè)人初步學(xué)習(xí)！后期學(xué)習(xí)在進(jìn)行更新!  ~~~~~~~~~~~

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1898.html

相關(guān)文章

  • 關(guān)于某題左列定寬右列寬度自適應(yīng)布局的學(xué)習(xí)

    摘要：今天群里有人做題發(fā)了一道題由于最近在學(xué)習(xí)布局就不禁研究了起來(lái)題目如下已知結(jié)構(gòu)如下以下哪些可以實(shí)現(xiàn)左列定寬右列寬度自適應(yīng)的布局左列右列選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)全部都試過(guò)一邊了首先是左列定寬的條件這個(gè)條件在平時(shí)看其實(shí)都似乎沒(méi)什么問(wèn)題起碼在我們大屏?xí)r看起 今天群里有人做題發(fā)了一道題,由于最近在學(xué)習(xí)flex布局,就不禁研究了起來(lái)...題目如下: 已知HTML結(jié)構(gòu)如下,以下哪些CSS可以實(shí)現(xiàn)左列定寬(...

    adam1q84 評(píng)論0 收藏0

  • 微信小程序之scroll-view的flex布局問(wèn)題

    摘要：關(guān)于微信小程序的組件，第一次寫的時(shí)候是直接在中用了一層容器包裹子元素，然后用了布局，并且是用了組件來(lái)實(shí)現(xiàn)的橫向滾動(dòng)，后面有提出改進(jìn)，但是不記錄下，就發(fā)現(xiàn)過(guò)了幾天，就有點(diǎn)懵了效果圖在里加一層容器，使用布局實(shí)現(xiàn)這里用布局實(shí)現(xiàn)的話，就要用組 關(guān)于微信小程序的scroll-view組件，第一次寫的時(shí)候是直接在scroll-view中用了一層容器包裹子元素，然后用了flex布局，并且是用了組件來(lái)...

    nihao 評(píng)論0 收藏0

  • 移動(dòng)端網(wǎng)站開(kāi)發(fā)前端學(xué)習(xí)總結(jié)

    摘要：關(guān)于適配宋體移動(dòng)端適配可以使用宋體宋體也可配合百分比寬度一起使用宋體宋體十分適用于適配默認(rèn)為以為單位。1.關(guān)于適配: 移動(dòng)端適配可以使用lib-flexible（也可配合百分比寬度一起使用）十分適用于webapp適配 Font-size默認(rèn)為12px 以rem為單位。 關(guān)于lib-flexible詳解：http://www.w3cplus.com/mobile/lib-flexible-fo...

    番茄西紅柿 評(píng)論0 收藏0

  • CSS Conf -《新時(shí)代CSS布局》學(xué)習(xí)總結(jié)

    摘要：分享嘉賓簡(jiǎn)介新時(shí)代布局的分享者是新加坡的國(guó)際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經(jīng)常是令前端開(kāi)發(fā)者頭痛的一塊工作。布局系統(tǒng)在這一小節(jié)中，慧晶老師主要分享了跟這新時(shí)代布局的三大棟梁。的首個(gè)公開(kāi)工作草案是在發(fā)布的，而的則是發(fā)布。 作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛(ài)好者也...

    番茄西紅柿 評(píng)論0 收藏0

  • CSS Conf -《新時(shí)代CSS布局》學(xué)習(xí)總結(jié)

    摘要：分享嘉賓簡(jiǎn)介新時(shí)代布局的分享者是新加坡的國(guó)際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經(jīng)常是令前端開(kāi)發(fā)者頭痛的一塊工作。布局系統(tǒng)在這一小節(jié)中，慧晶老師主要分享了跟這新時(shí)代布局的三大棟梁。的首個(gè)公開(kāi)工作草案是在發(fā)布的，而的則是發(fā)布。 作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛(ài)好者也...

    libxd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<