JS Web Flex彈性盒子模型代碼實(shí)例
更新時(shí)間：2020年03月10日 12:37:03 作者：work hard work smart
這篇文章主要介紹了JS Web Flex彈性盒子模型代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
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>檢查編號(hào)： 25</div><div>住院號(hào)： 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">檢查編號(hào)： 25</label><label class="item-flex">住院號(hào)： 198</label>
</div>
</body>
</html>
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用webpack搭建pixi.js開(kāi)發(fā)環(huán)境
- node.js 使用 net 模塊模擬 websocket 握手進(jìn)行數(shù)據(jù)傳遞操作示例
- Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)
- nodejs開(kāi)發(fā)一個(gè)最簡(jiǎn)單的web服務(wù)器實(shí)例講解
- php實(shí)現(xiàn)JWT(json web token)鑒權(quán)實(shí)例詳解
- NodeJS http模塊用法示例【創(chuàng)建web服務(wù)器/客戶端】
- Javascript Web Worker使用過(guò)程解析
相關(guān)文章
完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效
這篇文章主要介紹了完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效，非常的實(shí)用，附上實(shí)例代碼給大家，有需要的小伙伴參考下吧。2015-05-05
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個(gè)代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序2007-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript希爾排序、快速排序、歸并排序算法，感興趣的朋友可以參考一下2016-05-05
JavaScript的變量聲明與聲明提前用法實(shí)例分析
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結(jié)合實(shí)例形式分析了JavaScript變量聲明與聲明提前相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
最簡(jiǎn)單的JavaScript驗(yàn)證整數(shù)、小數(shù)、實(shí)數(shù)、有效位小數(shù)正則表達(dá)式
這篇文章主要介紹了最簡(jiǎn)單的JavaScript驗(yàn)證整數(shù)、小數(shù)、實(shí)數(shù)、有效位小數(shù)正則表達(dá)式,其中包含保留1位小數(shù)、保留2位小數(shù)、保留3位小數(shù)等正則,需要的朋友可以參考下2015-04-04
Javascript實(shí)現(xiàn)登錄框拖拽效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)登錄框拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
記錄一下, 對(duì)HTML的數(shù)組老是搞不清楚.2008-11-11
js如何比較兩個(gè)日期的時(shí)間大小簡(jiǎn)單代碼示例
在JavaScript中,日期比較涉及評(píng)估兩個(gè)日期,以確定一個(gè)日期是早于、晚于另一個(gè)日期還是與另一個(gè)日期相同,這篇文章主要給大家介紹了關(guān)于js如何比較兩個(gè)日期的時(shí)間大小的相關(guān)資料,需要的朋友可以參考下2024-06-06
javascript獲取下拉列表框當(dāng)中的文本值示例代碼
需要將用戶點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xiàng)后，將其所選的內(nèi)容保存起來(lái)，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下2013-07-07
在element-ui的select下拉框加上滾動(dòng)加載
這篇文章主要介紹了在element-ui的select下拉框加上滾動(dòng)加載，本文以以element-ui中的select為例，給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-04