如何使用css讓img垂直居中（flex方法）？

在css中，我們可以使用flex去實現垂直居中，但是flex并不是一個很好的方法，現在很多瀏覽器并不支持flex，例如IE8,9。

創新互聯建站主要從事成都網站設計、網站建設、網頁設計、企業做網站、公司建網站等業務。立足成都服務新豐,十多年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18982081108

首先我們要先給圖片添加一個div，并且定義為寬度為100px，高度也是100px，并且給它定義一些基本的屬性，其中我們把div中的display元素設置成flex，然后把另外一條添加align-items:center屬性。

css代碼：

body{background:#999}

.flexbox{width:300px;height:250px;background:#fff;display:flex;align-items:center}

.flexboximg{width:100px;height:100px;align-items:center;}

如果情況容許的話，可以用以下方法，兼容性更好：

body{background:#ccc;}

.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}

.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}

css基礎之flex布局

很多時候跟著書和不系統的視頻學習，會發現沒有方向，學了很多卻不知道自己能夠做出什么成績。

學習要有一個清晰的職業學習規劃，學習過程中會遇到很多問題，你可以到我們的web學習交流君羊- 點擊此處 ，

同時準備了基礎，進階學習資料。學友都會在里面交流，分享一些學習的方法和需要注意的小細節，每天也會準時講一些項目實戰案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的縮寫,意為 彈性布局

flex布局中把一個元素作為容器，容器中的子元素稱為項目

可以通過容器的flex屬性，設置所有項目的排列樣式。也可以通過項目的flex屬性，設置指定項目的排列樣式。

2.flex布局的方向

flex布局項目的排列方向可以有兩個維度，一水平，二垂直

項目排列方向稱為主軸，與主軸垂直的方向叫交叉軸

在每個軸上有兩個方向，從左至右，從右到左；從上到下，從下到上。

2.1 flex水平布局

在水平維度，默認方向是從左至右

可以通過?flex-direction：row-reverse設置為從右到左排列

效果圖：

1).默認方向,從左至右

2).反方向

2.2 垂直布局

效果圖：

1).默認方向，從上到下

2).反方向

3. 容器內項目換行

通過flex-wrap屬性，設置項目在容器內是否可以換行，默認不允許換行。

不換行的稱為單行容器，換行的稱為多行容器

也可以通過flex-flow屬性同時設置容器主軸方向和是否換行（推薦使用）

效果圖：

1).默認不允許換行，項目被壓縮

2).允許換行，當剩余寬度不足容納一個項目塊時，就換行

相關知識：

css如何實現邊框長度控制功能

詳細介紹css中的數學表達式calc()

關于書籍：需要學習資料的小伙伴們可以加群， 點擊此處

CSS: Flex 彈性布局

彈性元素是 container直接的在文檔流中的子元素

container在文檔流中的子元素才是彈性子元素

彈性元素的默認寬高為內容寬高

flex-direction: row|row-reverse|column|column-reverse

container內的排列順序: 從左往右 從右往左 從上往下 從小往上(都是從container對應方向邊緣開始)

flex-wrap: nowrap|wrap|wrap-reverse

order: integer

initial: 0

兩個黃色元素沒有設置order, 默認為0

flex-basis: height|width

設置的是寬還是高根據主軸來定, 如果主軸是行則設置默認寬度, 如果主軸是列則設置默認高度

flex-grow: integer

initial: 0

彈性元素的寬或高計算:

flex-basis + flow-grow/sum(flow-grow)*remain

flex-shrink: integer

initial: 1

彈性元素的寬或高計算:

flex-basis + flow-shrink/sum(flow-shrink)*remain

這里的remain是負值, 表示超出的內容大小

flex: flex-grow || flex-shrink || flex-basis

initial: 0 1 main-size ( main-size 元素沿主軸方向默認尺寸)

justify-content: flex-start | flex-end | center | space-between | space-around

效果依次如下:

align-items: flex-start | flex-end | center | stretch | baseline

align-self: auto | flex-start | flex-end | center | baseline | stretch

initial: auto

當多行時: 應用于行

align-content: flex-start | flex-end | center | space-between | space-around | stretch

CSS flex布局

flex布局是一種無論對于塊級元素還是行內元素都可以被采用的布局，且它使用起來也是十分的方便

首先是要指定flex布局

當我們指定flex布局方式的時候，其屬性值 float、clear、vertical-align就失效了

無論是塊級元素還是行內元素，當他們指定使用flex布局的時候，就被稱為“ 容器 ”（flex container）

他們的子元素自動成為容器成員，被稱為“ 項目 ”（flex item）。

flex布局是通過兩根軸決定的，其實現方式其實和直角坐標系很像，都是通過軸來進行定位

每個容器都有兩根軸，分別為水平的 主軸 （main axis）和垂直的 交叉軸 （cross axis）。主軸開始位置為main start，結束位置為main end。交叉軸的開始位置為cross start，結束位置為cross end

容器內的項目都是沿著主軸排列的，這點和塊級元素有較大的不同，因為每個塊級元素默認是占有一整行的，且排列方式為由上到下排列。

每個項目都占有一定的主軸空間和交叉軸空間，分別被稱為main size和cross size

flex布局下，容器和項目都有其各自的屬性

決定主軸的方向，即決定項目的排列方向，其屬性值有

決定了當一行放不下所有的項目時，其換行與否以及換行方式

定義了項目在主軸上的對齊方式，假設主軸是從左向右的水平排列

定義了項目在交叉軸上的對齊方式，假設交叉軸是從上到下排列

在這里重點說一下上面這兩個屬性。

這樣可以很方便的設置水平垂直居中

另外說一下align-items：baseline這個屬性值。如描述，這個屬性值是通過文字來進行對齊，而不是每個項目的邊界或是中心

在容器內具有多根主軸線時，可以定義這些軸線的對齊方式

align-content屬性和justify-content屬性，這兩者的屬性值有較大的相似之處，這是因為，justify-content屬性定義的是多個項目在主軸上的對齊方式，而align-content屬性定義的是多根主軸在交叉軸上的對齊方式，這兩者描述的對象就幾乎一致

定義了多個項目的排列順序，其使用方式和z-index屬性值有異曲同工之處，都是指定屬性值，屬性值為整數。對于order屬性，屬性值越小，則排列越靠前；對于z-index屬性，則屬性值越小，就越在底層

設置了項目的放大比例，其默認值為1。

設置了項目的縮小比例，默認值為1。

在分配多余空間之前，為項目定義其占據的主軸空間

用來設置單個項目與其他項目不同的對齊方式，其屬性值和align-items的屬性的屬性值基本一致，不過其默認值為auto，表示繼承父元素的屬性值。

CSS布局 + Flex布局

我們只會用到一點點兒CSS布局的屬性，雖然少，但既然要用到，就得把它們總結在這里，搞明白。

在了解CSS布局的相關屬性之前，我們先了解一下 盒子模型——CSS會把每個組件都看作是一個盒子，每個盒子從內往外有三個部分：

組件的寬度和高度決定了它在屏幕上顯示的尺寸，一個組件的寬度和高度就是它 外邊框所包圍矩形 的寬度和高度，iOS里也是這樣的。

我們可以通過 width 和 height 屬性給一個組件設置固定的寬度，不過需要注意 這兩個屬性只能接收數值，不能帶單位，這是因為RN要自己去適配安卓和iOS的單位。

在RN里，我們想讓一個組件自適應寬高，要分兩步。 首先我們要讓該組件撐滿它的父視圖，即如果我們想自適應寬度，就得先讓子視圖的寬度撐滿它父視圖的寬度，如果我們想自適應高度，就得先讓子視圖撐滿它父視圖的高度，如果我們寬度和高度都想自適應，就得先讓子視圖把它父視圖的寬度和高度都撐滿。然后才能像我們iOS里使用Masonry那樣，通過給組件添加上邊距、左邊距、下邊距、右邊距等約束來實現寬度和高度的自適應。

這里再對第一步做個解釋， item的 flex: 1 屬性可以讓item在主軸上撐滿它的容器，容器的 alignItems: 'stretch' 屬性 + item在側軸上不設置空間可以讓item在側軸上撐滿它的容器。 好像有點不明白是吧，我們再通過一個例子來說得明了點，RN里不是默認主軸為豎向、側軸為橫向嘛，我們就采取這個默認狀態來舉例子。 在RN里，默認主軸為豎向、側軸為橫向的狀態下，如果我們想讓某個組件自適應高度，就得首先在它自身上設置 flex: 1 屬性，來讓它的高度撐滿它的父視圖；如果我們想讓某個組件自適應寬度，就得首先在它父視圖身上設置 alignItems: 'stretch' 屬性（當然默認就是這個值），這還不夠，你還得確保不給這個組件設置 width 屬性或者 width 屬性的值設為 auto ；如果我們想讓一個組件自適應寬高，則兩者都得做。 當然，如果我們設置了主軸為橫向、側軸為豎向，其實也是一樣的道理，自己捋一下就知道怎么做了。如果還是看不懂的話，沒有關系，下面我們會詳細談到這幾個屬性，等你學了這幾個屬性，反過頭來看這里就明白了。

Flex是Flexible Box的縮寫，可譯為靈活的、有彈性的盒子。那Flex布局就是Flexible Box布局的縮寫，就譯為彈性盒子布局，用來對一個盒子進行靈活的布局。

在了解Flex布局之前，我們得先了解一下Flex布局里的兩對兒 重要的 概念。

采用Flex布局的組件，被稱為Flex容器（flex container），簡稱容器（container）。

這個組件上的子組件，被稱為Flex項目（flex item），簡稱item（項目）。

我們可以把容器和item看做是父視圖和子視圖的關系， 因此下文中的容器、父組件、父視圖將是一樣的概念，item、組件、子視圖將是一樣的概念，組件和視圖將是一樣的概念。

每個容器都有兩根軸，一個是 主軸， 一個是 側軸 。

容器里眾多的 item自動沿主軸進行排列。

一個item在主軸方向上所占據的空間稱為 main size ，一個item在側軸方向上所占據的空間稱為 cross size 。

RN里主軸的默認方向為豎向，側軸為橫向。 瀏覽器里主軸的默認方向為橫向，側軸為豎向，下面我們講Flex布局的屬性時會采用瀏覽器的狀態，學會后對應到RN里，換個主軸方向就可以了。

用在容器上的屬性，最常用的有 5個 ， 而且這些屬性還都不是從來設置容器自己的布局，而是用來設置容器里item的布局。

flex-direction 屬性用來設置主軸的方向，即容器里item自動排列的方向。 在瀏覽器里，主軸的方向默認為橫向，所以 flex-direction 屬性的默認值為 row 。

它有4種取值。

justify-content 屬性用來設置item在主軸上的對齊方式。

它有5種取值。

align-items 屬性用來設置item在側軸上的對齊方式。

它有5種取值。

默認情況下，一個容器只有一條主軸，所有的item都會沿著這條主軸自動排列下去，但是如果item太多了，一個屏幕長度的主軸根本串兒不下這么多item，那后面的item就會溢出屏幕，而界面還不是 ScrollView ，不能滾動，怎么辦呢？

flex-wrap 屬性用來設置換行，即當容器主軸上顯示不下那么多的item時，我們可以讓item換行來顯示，并且一旦設置了換行，那么這個容器就不再是一條主軸了，而是會有多條平行的主軸。

它有3種取值。

align-content 屬性用來設置多條主軸的對齊方式， 如果項目只有一根軸線，該屬性不起作用， 即 align-content 屬性要基于 flex-wrap 屬性設置了換行才有使用的意義。

它有6種取值。

用在item上的屬性，最常用的有 2個 ， 這些屬性都是用來設置item自己的布局。

在第1小節容器的屬性，我們已經通過 align-items 屬性統一設置了容器里item在側軸上的對齊方式，但如果其中某個item不想遵循這個對齊方式怎么辦呢？我們會常見到這種場景，10個里有8個item是一樣的對齊方式，就有1、2個item特立獨行，那我們就得用item自己的 align-self 屬性來單獨給它們設置對齊方式了。

align-self 屬性用來設置單個item在側軸上的對齊方式， 注意是給特立獨行的單個item設置哦，而且是側軸，它會覆蓋它容器的 align-items 屬性，當然如果不設置這個屬性，默認值就為 auto ，即item會默認使用容器的 align-items 屬性給它設置的對齊方式。

它有6種取值，除了 auto ，其他都與 align-items 屬性完全一致。怎么說呢，item的 align-self 屬性似乎是用來造反的，反抗它容器的 align-items 屬性。

flex 屬性接收一個整數值， flex 屬性描述起來太麻煩了，可以自行去搜索加深理解，我這里只列舉出它的用途及注意事項。

（1） flex 屬性有三個用途

（2）使用 flex 屬性需注意

iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 來做布局就行了，它們布局的思路是一樣的， 一個組件也同樣至少需要四個約束。

當然，它們之間有一個極其細小的差別，那就是：上面提到的“RN里組件自適應寬高分兩步”，而iOS里Masonry才不管你什么撐滿不撐滿呢。

當然，它們之間有一個極其巨大的差別，那就是：iOS里是沒有主軸和側軸之分的，你可以在一個父視圖上橫向、豎向同時放控件，并同時完成橫向和豎向的布局。但RN里有主軸和側軸之分，我們添加的組件只會沿著主軸排列，不可能同時出現橫向和豎向排列，并且布局的時候也只能是沿著主軸布局，不可能同時完成兩個方向的布局。

下面我們就通過幾個小練習，來對比一下Masonry布局和Flex布局+CSS布局的思路，加深對RN里怎么布局組件的理解。

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

參考博客：

阮一峰的《Flex布局：語法篇》

阮一峰的《Flex布局：實例篇》

網頁題目：css樣式flex,CSS樣式表可以將格式和結構分離
轉載源于：http://vcdvsql.cn/article24/dsdiice.html

成都網站建設公司_創新互聯，為您提供、網站收錄、云服務器、Google、網頁設計公司、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯