學習關于display ：flex 布局問題！

番茄西紅柿發布于2019-04-23 13:27 / 1378人閱讀

摘要：什么是呢答是的縮寫，意為彈性布局這個東西的引入，為盒模型提供了最大的靈活性可以相應式的實現各種頁面的布局。基本概念采用布局的元素，稱為容器，簡稱容器。在這個容器中默認存在兩個軸水平方向的主軸和垂直方向上的交叉軸。

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

1.什么是display：flex呢？

答：flex是 flexible box的縮寫，意為彈性布局；這個東西的引入，為盒模型提供了最大的靈活性！可以相應式的實現各種頁面的布局。

基本概念

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

圖：（摘自：他人博客）

以下6個屬性設置在容器上：

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

注意： 如果元素不是彈性盒對象的元素，則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>

以上僅是我個人初步學習！后期學習在進行更新! ~~~~~~~~~~~

GPU云服務器云服務器關于深度學習方面的問題 flex布局布局問題布局遇到的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1898.html

關于某題左列定寬右列寬度自適應布局的學習

摘要：今天群里有人做題發了一道題由于最近在學習布局就不禁研究了起來題目如下已知結構如下以下哪些可以實現左列定寬右列寬度自適應的布局左列右列選項選項選項選項全部都試過一邊了首先是左列定寬的條件這個條件在平時看其實都似乎沒什么問題起碼在我們大屏時看起今天群里有人做題發了一道題,由于最近在學習flex布局,就不禁研究了起來...題目如下: 已知HTML結構如下,以下哪些CSS可以實現左列定寬(...

adam1q84 2019-08-29 11:18 評論0 收藏0
微信小程序之scroll-view的flex布局問題

摘要：關于微信小程序的組件，第一次寫的時候是直接在中用了一層容器包裹子元素，然后用了布局，并且是用了組件來實現的橫向滾動，后面有提出改進，但是不記錄下，就發現過了幾天，就有點懵了效果圖在里加一層容器，使用布局實現這里用布局實現的話，就要用組關于微信小程序的scroll-view組件，第一次寫的時候是直接在scroll-view中用了一層容器包裹子元素，然后用了flex布局，并且是用了組件來...

nihao 2019-08-23 14:43 評論0 收藏0
移動端網站開發前端學習總結

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

番茄西紅柿 2019-04-23 11:53 評論0 收藏0
CSS Conf -《新時代CSS布局》學習總結

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

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
CSS Conf -《新時代CSS布局》學習總結

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

libxd 2019-05-23 11:56 評論0 收藏0