flex layout & demos

https://codepen.io/xgqfrms/pen/jjLPKN

https://css-tricks.com/snippets/css/a-guide-to-flexbox/



.flex-box {

    dispaly: flex;

    border: 1px solid red;

    height: 100px;

    position: relative;

    display: flex;

    flex-flow: row wrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

    box-sizing: border-box;

    margin: 10px;

}

.flex-item {

    height: 30px;

    margin: 5px;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

.item1 {

    flex: 1 1 auto;

    width: 80vw;

    background: #0f0;

}

.item2 {

    flex: 0 1 auto;

    width: 20vw;

    background: #f0f;

}

.item3 {

    flex: 1 1 auto;

    width: 20vw;

    background: #0f0;

}

.item4 {

    flex: 0 1 auto;

    width: 20vw;

    background: #f0f;

}

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

flex layout & demos的更多相关文章

  1. CSS3 & Flex Layout All In One

    CSS3 & Flex Layout All In One demos https://www.cnblogs.com/xgqfrms/p/10769302.html .flex-contai ...

  2. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  3. Flex Layout Attribute

    GitHub: https://github.com/StefanKovac/flex-layout-attribute 引入基本的样式,可以更好的布局,可以在线制作: http://progress ...

  4. pure CSS waterfall layout

    pure CSS waterfall layout 纯 CSS 瀑布流布局 flex layout .container{} .item{} https://caniuse.com/?search=c ...

  5. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  6. 微信小程序开发之搞懂flex布局1——Flexbox

    Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...

  7. CSS魔法堂：Flex布局

    前言  Flex是Flexible Box的缩写,就是「弹性布局」.从2012年已经面世,但由于工作环境的原因一直没有详细了解.最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血. Flex就 ...

  8. CSS ? Layout Module : CSS 布局模型

    1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...

  9. CSS Layout All In One

    CSS Layout All In One CSS2 position float % px , rem, em CSS3 flex grid multi column vw / vh 常见布局模式 ...

随机推荐

  1. Enabling Session Persistence 粘性会话

    NGINX Docs | HTTP Load Balancing https://docs.nginx.com/nginx/admin-guide/load-balancer/http-load-ba ...

  2. C# 防止程序多开（重复开启）

    Mutex(mutual exclusion,互斥)是 .Net Framework 中提供跨多个线程同步访问的一个类.它非常类似了 Monitor 类,因为他们都只有一个线程能拥有锁定.而操作系统能 ...

  3. 【LinuxShell】echo用法详解

    使用echo打印信息到终端 1 [Shell]echo "yz test" 2 yz test 3 [Shell]echo yz test 4 yz test 5 [Shell]e ...

  4. numpy、pandas学习二

    #numpy中arrary与pandas中series.DataFrame区别#arrary生成数组,无索引.列名:series有索引,且仅能创建一维数组:DataFrame有索引.列名import ...

  5. Vue3（三）CND + ES6的import + 工程化的目录结构 = 啥？

    突发奇想 这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样: vue的全家桶和UI库,采用传统的方式加载(CND.script). 自己写的js代码 ...

  6. linux查看log

    TOMCAT_PATH='/home/jyapp/apache-tomcat-7.0.59/'PID=`ps -ef |grep $TOMCAT_PATH | grep -v grep |awk '{ ...

  7. 20.LVM

    1.在硬盘分好区或者部署为RAID 磁盘阵列之后,再想修改硬盘分区大小就不容易了.换句话说,当用户想要随着实际需求的变化调整硬盘分区的大小时,会受到硬盘"灵活性"的限制. 这时就需 ...

  8. PTA 1014 Waiting in Line (30分) 解题思路及满分代码

    题目 Suppose a bank has N windows open for service. There is a yellow line in front of the windows whi ...

  9. 2019牛客暑期多校训练营（第十场）F.Popping Balloons(线段树)

    题意:现在给你n个点 现在让你横着划三条线间距为r 然后竖着划三条线间距同样为r 现在让你求经过最多的点数 思路:我们首先建一棵关于y区间的线段树 然后枚举x轴 每次更新重叠的点 然后再更新回去 找一 ...

  10. Codeforces Round #641 (Div. 2)

    只写了A~D A - Orac and Factors 题意:f(n)就是n的第二小因数,问执行k次 n=f(n)+n 后的结果. 题解:如果一直找第二小的因子的话,1e9肯定得t.看下边样例解释就会 ...