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

資訊專欄INFORMATION COLUMN

通過動圖形象地為你介紹 flexbox 是如何工作的（一）

everfly / 3527人閱讀

摘要：為了完成這一目標，它允許容器自己來決定如何均勻地分布其中的元素包括他們的尺寸和他們之間的間距。

作者：Scott Domes

編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58aaadb2fc5b7f63e8c23f69

英文原文：How Flexbox works?—?explained with big, colorful, animated gifs

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

通過動圖形象地為你介紹 flexbox 是如何工作的

flexbox 承諾將我們從萬惡的純 CSS 中拯救出來（如垂直對齊）。

flexbox 也正在實現(xiàn)它的這一目標，但是用戶掌握這一新的模型也將會是個挑戰(zhàn)。

因此在這里，我們將會用動圖介紹 flexbox 是如何工作的，使得我們可以用它來做更好的布局。

flexbox 的潛在原則是使得布局更加靈活和直觀。

為了完成這一目標，它允許容器自己來決定如何均勻地分布其中的元素——包括他們的尺寸和他們之間的間距。

這理論上來講，聽起來很美好。但是讓我們來看一下實踐中會發(fā)生什么。

在這篇文章中，我們會鉆研5個通用 flexbox 原則。會探索它們都做了什么？你可以如何使用它們？以及它們的結(jié)果是什么樣的？

屬性1：display: flex

在一個灰色背景的容器div里面，有四個顏色不同、尺寸不同的子div，此時每個div有默認的display: block，每一個的寬度也占滿了一整行。

為了使用 flexbox，需要將你的容器放在 flex 容器中 ，見如下代碼：

#container {
  display: flex;
}

可以看到，發(fā)生了一點變化。你的四個div顯示到了一行上，但也就僅此而已?？墒悄阋溃谶@背后，你做了一件很有 power 的事情。你賦予了你的 div 一個叫做 flex上下文 的東西。

你現(xiàn)在可以把它應(yīng)用在你的上下文中了，是不是比傳統(tǒng)的 CSS 簡單很多！

屬性2：flex-direction

一個 flexbox 容器有兩個坐標軸：主軸和交叉軸，直觀的來看如下圖：

默認情況下，元素都是從左到右地分布在主軸上。這就是為什么當你應(yīng)用display: flex的時候，形狀默認水平分布的原因。

flex-direction，可以使你的主軸旋轉(zhuǎn)。

#container {
  display: flex;
  flex-direction: column;
}

這里有一個很重要的區(qū)別：flex-direction: column并不是把你的形狀分布在交叉軸上。而是使主軸自身發(fā)生了旋轉(zhuǎn)，從水平方向旋轉(zhuǎn)到了垂直方向。

還有一些其他的flex-direction可選項，如：row-reverse和column-reverse。

屬性3：justify-content

justify-content控制的是你在主軸上如何對齊元素。

這里我們需要對主軸和交叉軸的區(qū)別有更深一點的理解。首先讓我們回到flex-firection: row。

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

使用 justify-content，你有五個選擇：

flex-start

flex-end

center

space-between

space-around

space-around和space-between是最直觀的。space-between使每個元素之間有相同的距離，但是不包含元素和容器之間的距離。

space-around讓每個元素塊的兩側(cè)有相同的空隙距離。這就意味著最外層的元素和容器之間的距離，是兩個元素之間距離的一半（每個元素塊的左右兩側(cè)都貢獻了一個不重疊的等距離，因此是兩倍的間隙）。

最后小結(jié)：記住justify-content是沿著主軸的，flex-direction是轉(zhuǎn)換主軸的。這對你以后移動元素很關(guān)鍵。

屬性4：align-items

如果你已經(jīng)消化了justify-content，那么align-items對你倆講將是輕而易舉的事了。

justify-content是沿著主軸的，而align-items是應(yīng)用到交叉軸上的。

調(diào)整flex-direction，使得坐標軸看起來和上面的圖一樣。

接下來，我們一起看一下align-items命令。

flex-start

flex-end

center

stretch

baseline

前三個和justify-content沒什么區(qū)別，后兩個則有一些不同。

stretch你的元素將會被拉伸充滿整個交叉軸。
baseline則會使你的文字底部對齊。見圖知意。

（注意：如果用align-items: stretch，你必須要將元素的height設(shè)置成auto，否則height屬性將會覆蓋stretch）

對于baseline要意識到，如果你把文字標簽?zāi)玫?，那么將會用元素的底部對齊來替代原來的效果，如下圖。

為了更好的展示主軸和交叉軸，我們結(jié)合justify-content和align-items來看一下兩個flex-direction的核心不同。

用row，元素被分布在水平主軸上。
用column，被分布在垂直主軸上。

在這兩個 case 中，不論垂直還是水平方向，四個元素都是被居中的，但是這兩種情況是絕對不能互相替換的。

屬性5：align-self

align-self允許你手動操作一個特定元素的對齊方式。

對于一個元素而言，它基本上是對align-items的覆蓋。盡管align-self默認值設(shè)成了auto，但是它和align-items所有的屬性都是一樣的，這也使得這個元素繼承了容器的align-items。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// 只有這個形狀會居中。

我們來看一下它設(shè)置的結(jié)果是什么樣的。對前兩個形狀設(shè)置不同的align-self，其他元素設(shè)置為align-items: center和flex-direction: row。

結(jié)論

盡管我們僅僅講了 flexbox 的皮毛，但是這些命令應(yīng)該也足夠你應(yīng)付很多基本布局了。

如果你還想看到更多的 GIF flexbox 教程，或者這篇教程對你有所幫助，請在下面給我點贊吧，或者給我留言。

感謝你的閱讀！

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。

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

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

相關(guān)文章

  • 通過動圖形象地為你介紹 Flexbox 是如何工作的（二）

    摘要：解釋器的利弊解釋器啟動和執(zhí)行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因?？墒钱斈氵\行同樣的代碼一次以上的時候，解釋器的弊處就顯現(xiàn)出來了。起初，監(jiān)視器監(jiān)視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...

    alanoddsoff 評論0 收藏0

  • 通過動圖形象地為你介紹 Flexbox 是如何工作的（二）

    摘要：解釋器的利弊解釋器啟動和執(zhí)行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因?？墒钱斈氵\行同樣的代碼一次以上的時候，解釋器的弊處就顯現(xiàn)出來了。起初，監(jiān)視器監(jiān)視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...

    Shonim 評論0 收藏0

  • 拒絕爛大街——Flexbox布局演示站了解一下

    摘要：前言最近學到布局，當時就感覺真是一個布局的神器。友好的提示初學者不易記全所有的屬性和值的左右，鼠標放在屬性名上即可顯示相應(yīng)屬性的作用。 前言 最近學到Flexbox布局，當時就感覺真是一個布局的神器。終于擺脫了利用各種定位浮動布局的日子。想寫文章總結(jié)一下吧，發(fā)現(xiàn)介紹Flexbox布局類的文章都被寫爛了，各種大神寫的也是生動形象，單單寫一個布局用法感覺除了自己記錄方便本地查并沒有什么意義...

    bigdevil_s 評論0 收藏0

  • Flexbox入門教程

    摘要：我們會在本文給出一個易于理解的入門介紹。項的順序的屬性另外一個的能力，是能夠輕松改變元素的顯示順序。她想讓成為頁面的第一個元素，顯示在之前?？山邮艿闹涤?，或者一個數(shù)字后面緊跟著，，或其他長度單位。 近幾年，CSS領(lǐng)域出現(xiàn)了一些復雜的專用布局工具，用以代替原有的諸如使用表格、浮動和絕對定位之類的各種變通方案。Flexbox，或者說是彈性盒子布局模塊（Flexible Box Layout...

    劉永祥 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<