<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

ul,li{margin:0;padding:0;list-style:none;}

ul{display:-webkit-box;}

li{-webkit-box-flex:1;height:100px;background:red;margin:10px;}

</style>

</head>

<body>

<ul>

    <li>11111111111111111111111111111111</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

</body>

</html>

使用box-flex指定的他的宽度，但是被内容撑开了，这并不是理想中的。

解决方案：

1、给使用box-flexd的元素添加一个宽度，width任意值（像素，百分比，），就可以。

-webkit-box-flex被内容撑开了的更多相关文章

  1. flex:1 内容不要撑开

    .content { flex: 1; overflow: hidden: }

  2. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  3. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  4. css flex 使内容 水平居中 的方法...

    刚开始以为是  justify-content : center 设置为 居中... 的确,,当 元素满了时 的确能 居中.但是 当只有一个元素时,这一个元素也会居中... 想了半天没找到方法..突然 ...

  5. 两个div，高度都是100% 用 display:flex; 和 min-height 一边撑高了，另一边自动走 （不加flex不自动撑开）

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  6. textarea输入框随内容撑开高度

    原文链接 方法一(jquery): $('textarea').each(function () {  this.setAttribute('style', 'height:' + (this.scr ...

  7. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  8. Flex布局兼容知识点总结

    转载,原文http://www.cnblogs.com/tugenhua0707/p/5180841.html,部分截取 假设父容器class为 box,子项目为item.旧版语法如下:一:定义容器的 ...

  9. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

随机推荐

  1. [LeetCode] Repeated Substring Pattern 重复子字符串模式

    Given a non-empty string check if it can be constructed by taking a substring of it and appending mu ...

  2. [LeetCode] Single Number III 单独的数字之三

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  3. c#枚举使用详解

    简介 1. 枚举(enum type)通常用来表示一组常量.由于枚举是强类型的,这在编程中给我们提供了极大的方便. 2. 枚举的定义: public enum Sex { 男 = 0, 女 = 1 } ...

  4. Firefox默认英文修改中文

    对于firefox,中文还是看着顺眼,为了自己的顺心.动起手来,自力更生,丰衣足食! 01.确定Linux的firefox版本 firefox -v 02.下载对应版本的中文语言包 http://ft ...

  5. c风格字符串

    1.字符数组截取 有当然有了,应均包含在<string.h>中. 有strncpy,strncat.可以帮你从任何位置,取得任意合法长度的字符串. 用法基本同strcpy,strcat. ...

  6. format not a string literal and no format arguments

    今天cocos2d-x打包 android的时候报错:format not a string literal and no format arguments 报错点是:__String::create ...

  7. python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法？

    python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法: 原因:因为jenkins是用windows installer 安装成 windo ...

  8. 【BZOJ-3270】博物馆 高斯消元 + 概率期望

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 292  Solved: 158[Submit][Status][Discuss] ...

  9. Map工具系列-08-map控件查看器

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  10. fedora22,fedora24最简单的安装virtaulbox的方法

    fedora为什么不好用呢? 1.因为很多软件没有预先安装,新手安装时,就无从下手了. 2.版本更新太快,有老手提供了解决方案,但是版本更新了,新手按照步骤来,就不能配置成功! 不抱怨了. 安装vir ...