溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.justify-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox彈性盒布局</title>
<style>
.demo{
display: -webkit-flex;
justify-content: space-between;
}
</style>
</head>
<style>
</style>
<body>
<div class="demo">
<div>姓名： 張三</div><div>年齡： 26歲</div>
</div>
<div class="demo">
<div>性別： 男</div><div>生日： 1995-05-06</div>
</div>
<div class="demo">
<div>檢查編號： 25</div><div>住院號： 198</div>
</div>
</body>
</html>
效果圖
2.flex三行二列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox彈性盒布局</title>
<style>
.demo{
display: -webkit-flex;
}
.item-flex{
flex:1;
}
</style>
</head>
<style>
</style>
<body>
<div class="demo">
<label class="item-flex">姓名： 張三</label><label class="item-flex">年齡： 26歲</label>
</div>
<div class="demo">
<label class="item-flex">性別： 男</label><label class="item-flex">生日： 1995-05-06</label>
</div>
<div class="demo">
<label class="item-flex">檢查編號： 25</label><label class="item-flex">住院號： 198</label>
</div>
</body>
</html>
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
