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. Java中get()和set()作用

    一.前言 在程序的设计中,我们普遍的定义一个private变量,然后为这个变量加上get() .set()方法,那为何不直接定义一个public变量呢? 很多人是这样回答的: 1.关系到安全性的问题, ...

  2. 小白的springboot之路（十九）、集成swagger（com.spring4all篇）

    0-前言 集成swagger,有两种方式: 一种在前面已经介绍过了,直接集成官方的springfox-swagger2的方式,这种方式需要在配置类中配置 第二种方式是这里要介绍的方式,国人写的com. ...

  3. Mysql，Oracle与Java字段类型映射关系

    Mysql,Oracle与Java字段类型映射关系 参考相关博文 MySQL/Oracle字段类型 Java字段类型 最大长度 BIT java.lang.Boolean 1 BLOB java.la ...

  4. RESTFul应用分析

    Restful API 近年来应用越来越广泛,各大互联网公司纷纷推出了自己的 Restful API 服务. 本文将从实际应用出发,从 REST 到 Restful 再到 Restful API ,逐 ...

  5. vmware安装linux系统，自动建立没选项

    虚拟机安装CentOS自己跳过分区,直接就到最后的软件包安装了 建完系统后不用power on,建完后在edit一下系统参数,应该会看见两个cd, 有一个是vmware自己加的,把那个删除后在开机就可 ...

  6. 菜鸟初学Linux——Ubuntu系统中，用root权限进行复制粘贴操作

    long long ago,积累了一些Linux的小知识,拿出来分享一下,希望以后能够在工作上带来一些帮助. 方法一 第一步:打开终端,在命令行里输入sudo nautilus   第二步:输入你的用 ...

  7. Java排序算法（一）冒泡排序

    一.测试类SortTest  import java.util.Arrays; public class SortTest { private static final int L = 20; pub ...

  8. linux虚拟摄像头vivid配置

    总述    最近在看摄像头驱动,需要配置虚拟摄像头的驱动,但是教程里面是linux2.6内核的,实际电脑的是Ubuntu16,内核是linux4.15版本,从2.6到4.15内核好多文件发生了变化,所 ...

  9. E - E(最短路解决源点到多点，多点到源点的和（有向图）)

    问从1号点到各个点的距离+各个点到1号点之间的距离和的最小值 详解键连接https://www.cnblogs.com/csx-zzh/p/13411588.html In the age of te ...

  10. 2013-2014 ACM-ICPC, NEERC, Eastern Subregional Contest PART (8/10)

    $$2013-2014\ ACM-ICPC,\ NEERC,\ Eastern\ Subregional\ Contest$$ \(A.Podracing\) 首先枚举各个折现上的点,找出最小宽度,然 ...