快捷導(dǎo)航

JS Web Flex彈性盒子模型代碼實例

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

這篇文章主要介紹了JS Web Flex彈性盒子模型代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

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>

效果圖

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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