溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中flex-basis屬性的方法

發(fā)布時間：2020-09-24 11:10:11 來源：億速云 閱讀：278 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css中flex-basis屬性的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css flex-basis屬性用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值，css語法是flex-basis: number|auto|initial|inherit；如果元素不是彈性盒對象的元素，則flex-basis屬性不起作用。

css flex-basis屬性怎么用？

定義和用法

flex-basis 屬性用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。。

注意：如果元素不是彈性盒對象的元素，則 flex-basis 屬性不起作用。

默認(rèn)值： auto

繼承： 否

可動畫化： 是。

版本： CSS3

JavaScript 語法： 

object.style.flexBasis="200px"

CSS 語法

flex-basis: number|auto|initial|inherit;

屬性值

number 一個長度單位或者一個百分比，規(guī)定靈活項(xiàng)目的初始長度。

auto 默認(rèn)值。長度等于靈活項(xiàng)目的長度。如果該項(xiàng)目未指定長度，則長度將根據(jù)內(nèi)容決定。

initial 設(shè)置該屬性為它的默認(rèn)值。

inherit 從父元素繼承該屬性。

實(shí)例

設(shè)置第二個彈性盒元素的初始長度為 80 像素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex-grow: 0; /* Safari 6.1+ */
    -webkit-flex-shrink: 0; /* Safari 6.1+ */
    -webkit-flex-basis: 40px; /* Safari 6.1+ */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}

#main div:nth-of-type(2) {
    -webkit-flex-basis: 80px; /* Safari 6.1+ */
    flex-basis: 80px;
}
</style>
</head>
<body>

效果：

css中flex-basis屬性的方法

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中flex-basis屬性的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手