Code Thuộc tính flex-basis trong CSS

Code Thuộc tính flex-basis trong CSS

Code Thuộc tính flex-basis trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-basis trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{border:1px solid red; display: flex; width:100%; height:100px; margin-bottom:10px}
.divcha div {border:1px solid blue;}
</style>
</head>
<body>

<h1>Code Thuộc tính flex-basis trong CSS</h1>

<p>Dùng để quy định chiều rộng của một phần tử con, thuộc tính này sử dụng kèm với giá trị flex của thuộc tính display cho phần tử HTML cha:</p>

<div class="divcha">
    <div style="flex-basis: 50%;">flex-basis: 50%;</div>
    <div style="flex-basis: 100px;">flex-basis: 100px;</div>
    <div style="flex-basis: 100px;">flex-basis: 100px;</div>
    <div style="flex-basis: 50px;">flex-basis: 50px;</div>
</div>

<div class="divcha">
    <div style="flex-basis: 50px;">flex-basis: 50px;</div>
    <div style="flex-basis: 100px;">flex-basis: 100px;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
</div>

<div class="divcha">
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-basis: 70px;">flex-basis: 70px;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 2;">flex-grow: 2;</div>
</div>

</body>
</html>
Code Thuộc tính flex-basis trong CSS nằm trong bài viết Thuộc tính flex-basis trong CSS