成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Flexbox Guide

stefanieliang / 3656人閱讀

摘要：模型，通常被稱為，是一種一維的布局模型。它將基于行或列控制布局，但不能同時(shí)控制布局。的主要目標(biāo)是允許項(xiàng)目填充其容器提供的整個(gè)空間，具體取決于您設(shè)置的一些規(guī)則。那么超出的需要被消化通過(guò)收縮因子，所以加權(quán)綜合可得。

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。

基本介紹

瀏覽器兼容性

啟用Flexbox

容器屬性

行||列 對(duì)齊 ==row and columns==

水平||垂直 對(duì)齊 ==Vertical and horizontal==

更改水平對(duì)齊 ==change horizontal alignment==

更改垂直對(duì)齊 ==change vertical alignment==

關(guān)于基準(zhǔn)線 ==about baseline==

換行 ==wrap==

flex元素上的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

介紹

Flexbox，也稱為靈活盒模塊，是兩個(gè)現(xiàn)代布局系統(tǒng)之一，還有CSS Grid。與CSS Grid（二維）相比，flexbox是一維布局模型。它將基于行或列控制布局，但不能同時(shí)控制布局。flexbox的主要目標(biāo)是允許項(xiàng)目填充其容器提供的整個(gè)空間，具體取決于您設(shè)置的一些規(guī)則。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：

Table layouts

Floats

clearfix hacks

display: table hacks

兼容性

IE10以下不兼容，一些瀏覽器需要使用-webkit或者display:-webkit-box兼容處理。

使用flexbox 
display:flexbox

或者

display:inline-flexbox
容器屬性

flex-direction

justify-content

align-items

flex-wrap

flex-flow

行對(duì)齊或者列對(duì)齊

flex-direction決定容器以行對(duì)齊還是列對(duì)齊。

flex-direction:row，行對(duì)齊，從左到右

flex-direction:row-reverse，行對(duì)齊，從右到左

flex-direction:column，列對(duì)齊，從上到下

flex-direction:column-reverse，列對(duì)齊，從下到上

如下圖所示：

水平對(duì)齊或者垂直對(duì)齊

flex-direction默認(rèn)是row，從左向右，當(dāng)其屬性值為column時(shí)，是從上到下，可以使用justify-content和align-items改變水平和垂直對(duì)齊。

改變水平對(duì)齊方式

justify-content有5個(gè)屬性值：

flex-start 左對(duì)齊

flex-end 右對(duì)齊

center 居中對(duì)齊

space-between 首尾對(duì)齊容器左右側(cè)，中間間距相等

space-around 每個(gè)元素的間距相等

改變垂直對(duì)齊方式

align-items有5個(gè)屬性值：

flex-start 頂部對(duì)齊

flex-end 底部對(duì)齊

center 居中對(duì)齊

baseline 基線對(duì)齊

stretch 拉伸以適應(yīng)容器

關(guān)于align-items:baseline，可以看看codepen：https://codepen.io/flaviocopes/pen/oExoJR

換行

默認(rèn)情況下，flexbox容器中的項(xiàng)目保留在一行中，縮小它們以適合容器。

可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse對(duì)容器中的元素進(jìn)行換行處理。

一種簡(jiǎn)寫方式：flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap

適用于flexbox容器內(nèi)每個(gè)元素的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

order-改變?cè)氐捻樞颍缦聢D所示，可以指定某個(gè)元素的order值，以改變其位置，默認(rèn)值為0

align-self-元素使用align-self覆蓋容器的align-items對(duì)當(dāng)前元素的對(duì)齊方式

flex-grow || flex-shrink 如有必要，可以增加或縮小某個(gè)元素

flex-grow：默認(rèn)值為0，當(dāng)某個(gè)元素flex-grow為1，另一個(gè)為2，則為flex-grow：2的元素占用flex-grow:1的空間的2倍。

flex-shrink：默認(rèn)值為1，如果沒(méi)有顯示定義該屬性，將會(huì)自動(dòng)按照默認(rèn)值1在所有因子相加之后計(jì)算比率來(lái)進(jìn)行空間收縮。

比如：有這么一個(gè)容器，div>.box13+.box22父容器定義寬度為500px，子元素定義寬度為120px，box1的flex-shrink為1，.box2的flex-shrink為2，那么子項(xiàng)相加之后即為 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通過(guò)收縮因子，所以加權(quán)綜合可得 1001+1001+1001+1002+100*2=700px。

于是我們可以計(jì)算 A、B、C、D、E 將被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即約等于14px
B 被移除溢出量：(100*1/700)*100，即約等于14px
C 被移除溢出量：(100*1/700)*100，即約等于14px
D 被移除溢出量：(100*2/700)*100，即約等于28px
E 被移除溢出量：(100*2/700)*100，即約等于28px

最后A、B、C、D、E的實(shí)際寬度分別為：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
flex-basis-用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值，默認(rèn)值為auto，其與width的區(qū)別可以參考這篇文章：https://www.jianshu.com/p/17b... flex：有三個(gè)屬性值

flex-grow

flex-shrink

flex-basis

flex: 0 1 auto
分別對(duì)應(yīng)flex-grow、flex-shrink、flex-basis
結(jié)尾

友情獻(xiàn)上小游戲，通過(guò)游戲?qū)W習(xí)flexbox

http://flexboxfroggy.com/#zh-cn

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114063.html

相關(guān)文章

  • CSS 布局經(jīng)典問(wèn)題初步整理

    摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

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

  • 朝花夕拾：CSS居中完全指南

    摘要：正文居中是常被開發(fā)者抱怨的問(wèn)題之一。注意你不能將浮動(dòng)元素居中。水平且垂直居中你可以將前面的方法任意組合起來(lái)，實(shí)現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。 參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒(méi)有接...

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

  • CSS 居中完全指南

    摘要：在文本前面插入一個(gè)高度為百分百的偽元素，讓文本與其垂直對(duì)齊。塊級(jí)元素或者使用垂直水平居中或者使用 翻譯自 https://css-tricks.com/centering-css-complete-guide/ 預(yù)先給出這樣的樣式 .container { width: 100%; height: 200px; background-color: azur...

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

  • flexbox：更加優(yōu)雅的Web布局

    摘要：它用來(lái)可以處理更加復(fù)雜的布局。在容器下的子元素的寬度和比容器和小的時(shí)候起作用。按照的值減去相應(yīng)大小得到子元素的值。實(shí)例截圖實(shí)例查看用于當(dāng)前行中的子元素進(jìn)行對(duì)齊布局。子元素拉伸至充滿容器。優(yōu)雅的實(shí)現(xiàn)響應(yīng)式布局。 showImg(http://i2.tietuku.com/fd0ddd6dbd15e380.jpg); flexbox layout是W3C為了更好的在網(wǎng)頁(yè)中排版和布局而設(shè)計(jì)...

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

  • Flexbox完全指南（譯）

    摘要：本文譯自這里，針對(duì)本文介紹的屬性列個(gè)提綱伸縮容器屬性伸縮項(xiàng)目屬性以后再布局時(shí)可以考慮用啦背景布局模塊目前上一次工作草案的叫法旨在提供一種更高效的方式來(lái)布局排列及分配容器中項(xiàng)目的空間，即便容器大小是未知或動(dòng)態(tài)變化的因此稱為。 本文譯自 A Complete Guide to Flexbox這里，針對(duì)本文介紹的屬性列個(gè)提綱： 伸縮容器屬性： display flex-direction...

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

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

0條評(píng)論

閱讀需要支付1元查看
<