<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style>

        body{

            margin: 0;

            padding: 0;

        }

        #contentBody{

            display: -webkit-box;

            -webkit-box-orient: Horizontal;/*默认为横向排列*/

            /*-webkit-box-orient:vertical;*/

        }

        #left{

            /*-宽度自适应*/

            -webkit-box-flex: 1;

            background-color: red;

        }

        #center{

            /*正常width*/

            -webkit-box-flex: 1;

            background-color: gray;

        }

        #right{

            -webkit-box-flex: 1;

            background-color: greenyellow;

        }

    </style>

</head>

<body>

<div id="contentBody">

    <div id="left">

        <ul>

            <li>sad</li>

            <li>阿斯顿</li>

            <li>似懂非懂</li>

            <li>发个好地方</li>

            <li>给发货人</li>

            <li>uisgbdd</li>

        </ul>

    </div>

    <div id="center">

        <p style=" text-indent: 2em;">东方市国土海洋突然反悔的风格火热你的风格和对方谈话我让他怀疑是个电话吧asdfsadggh负担和感情而过去而地擦拭地方</p>

    </div>

    <div id="right"> <ul>

        <li>是的方法</li>

        <li>阿斯顿</li>

        <li>似大师傅赶得上风格懂非懂</li>

        <li>发个好地方</li>

        <li>给发货人</li>

        <li>uisg对方感到附属国bdd</li>

    </ul></div>

</div>

</body>

</html>

　　

CSS弹性盒布局的更多相关文章

  1. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  2. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  3. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  4. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  5. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  6. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  7. CSS3与弹性盒布局

    1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...

  8. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  9. CSS3-box-flex弹性盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. html基本标签练习

    Alt  显示工具栏 f2修改文件名称 内联元素:<div>只占一行</div> 块级元素:<span></span> 以utf8无bom格式编码 安装 ...

  2. POJ3177 Redundant Paths（边双连通分量+缩点）

    题目大概是给一个无向连通图,问最少加几条边,使图的任意两点都至少有两条边不重复路径. 如果一个图是边双连通图,即不存在割边,那么任何两个点都满足至少有两条边不重复路径,因为假设有重复边那这条边一定就是 ...

  3. UOJ#77. A+B Problem

    题目名称是吸引你点进来的. 从前有个 n 个方格排成一行,从左至右依此编号为 1,2,⋯,n. 有一天思考熊想给这 n 个方格染上黑白两色. 第 i 个方格上有 6 个属性:ai,bi,wi,li,r ...

  4. windows raid mode重新安装系统（win10）

    常规安装模式: STEP 1 进入bios 将高级设置中,引导模式设置为传统(旧模式)模式,一般存在legacy (旧模式),uefi with csm ,uefi without csm 三个模式, ...

  5. winform学习-----理解小概念-20160517

    1.MouseDown事件 当鼠标指针位于控件上并按下鼠标键时发生. 2.MouseUp事件 当鼠标指针在控件上并释放鼠标按键时发生. 与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才 ...

  6. asp.net 微信企业号办公系统-流程设计--流程步骤设置-数据设置

    数据设置是控制在流程处理过程中,当前步骤的数据显示与编辑状态,控制当前步骤哪些字段为只读,隐藏或可编辑.需要配合表单设计器使用.

  7. <!--[if IE]>….<![endif]--> (<!--[if !IE]>||<![endif]-->)的用法

    1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 ...

  8. tableviewCell折叠状态1

    // //  LHQReportOnTheUseOfFundsCtrl.m //  11 - 投资管理 - 李洪强 //  资金使用情况汇报 //  Created by vic fan on 16/ ...

  9. cvSave in VS2010 or Linux

    cvSave这个函数是OpenCV中用来保存某个数据类型到文件中常用的函数,它原本共有五个参数,但是在VS2010中只需要填前两个,而在Linux必须填满五个,否则会出错,如下: // VS2010 ...

  10. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...