css中的彈性布局是什么意思-創(chuàng)新互聯(lián)

小編給大家分享一下css中的彈性布局是什么意思，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)是專業(yè)的富川網(wǎng)站建設(shè)公司，富川接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行富川網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

css中的彈性布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞?。引入彈性布局模型的目的是提供一種更有效的方式來對一個容器的子元素進行排列、對齊和分配空白空間。

彈性布局介紹：

彈性盒子是 CSS3 的一種新的布局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子內(nèi)容：

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內(nèi)包含了一個或多個彈性子元素。

注意：彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。

彈性子元素通常在彈性盒子內(nèi)一行顯示。默認情況每個容器只有一行。

以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;    
    display: flex;    
    width: 400px;    
    height: 250px;    
    background-color: lightgrey;}
 .flex-item {
    background-color: cornflowerblue;    
    width: 100px;    
    height: 100px;    
    margin: 10px;}
</style>
</head>
<body>
 <div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> </div>
 </body>
</html>

看完了這篇文章，相信你對css中的彈性布局是什么意思有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：css中的彈性布局是什么意思-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://aaarwkj.com/article46/cdpjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站改版、手機網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、域名注冊、網(wǎng)站營銷

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

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css中的彈性布局是什么意思-創(chuàng)新互聯(lián)