快捷導(dǎo)航

JS Web Flex彈性盒子模型代碼實(shí)例

更新時(shí)間：2020年03月10日 12:37:03 作者：work hard work smart

這篇文章主要介紹了JS Web Flex彈性盒子模型代碼實(shí)例,文中通過示例代碼介紹的非常詳細(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用layer彈窗,制作編輯User信息頁(yè)面的方法
今天小編就為大家分享一篇使用layer彈窗,制作編輯User信息頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Maps Javascript
Maps Javascript...
2007-01-01
Jquery調(diào)用iframe父頁(yè)面中的元素及方法
對(duì)于javascript操作iframe父級(jí)頁(yè)面元素的方法，大家應(yīng)該都非常清楚了，下面結(jié)合當(dāng)前非常流行的jquery分享一下如何使用jquery查找和操作iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼。
2016-08-08
javascript實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)自定義滾動(dòng)條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript 模擬用戶單擊事件
單擊一個(gè)按鈕或超鏈接，然后會(huì)出現(xiàn)其他的超鏈接，這時(shí)要讓其中的一個(gè)超鏈接被單擊，以顯示一個(gè)初始頁(yè)面。（公司頁(yè)面使用了frameset）很顯然，之后的超鏈接單擊事件需要通過JavaScript來觸發(fā)。
2009-12-12
微信小程序?qū)崿F(xiàn)的圖片保存功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的圖片保存功能,結(jié)合實(shí)例形式分析了微信小程序wx.downloadFile({})及wx.saveImageToPhotosAlbum({})函數(shù)圖片保存功能相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04
javaScript同意等待代碼實(shí)現(xiàn)心得
javaScript功能描述：本程序?qū)崿F(xiàn)在同意某某協(xié)議頁(yè)面對(duì)同意按鈕進(jìn)行十秒鐘的禁用，同時(shí)在按鈕的Value顯示倒計(jì)時(shí)。
2011-01-01
禁止你的左鍵復(fù)制實(shí)用技巧
左鍵復(fù)制對(duì)于所有人來說有好有壞，例如原創(chuàng)內(nèi)容就不想被別人復(fù)制，接下來介紹一種方法，有需要的朋友可以參考下
2013-01-01
BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-02-02
純js簡(jiǎn)單日歷實(shí)現(xiàn)代碼
日歷想必大家都比較熟悉吧，實(shí)現(xiàn)的方法有很多種，在本文大家將學(xué)會(huì)到如何使用js簡(jiǎn)單實(shí)現(xiàn)日歷，感興趣的朋友可以了解下
2013-10-10