草庐IT

html - 无法将 flexbox child 的宽度设置为 100%

coder 2023-08-09 原文

我正在学习 CSS flexbox 并且正在做一个简单的布局，我希望第一个 flex 子元素以父元素的 100% 宽度显示，其余的 flex 元素包裹在下面。此外，包裹的 flex 元素应以特定比例占据宽度(易于使用“flex”属性设置)。

为此，我将第一个 flex 元素的“flex-basis”属性设置为 100%，并将下一个 2 的 flex 属性设置为我想要的比例。这是相关 CSS 的样子(完整 fiddle 的链接在下面):

.main{
    max-width: 1000px;
    margin: 100px auto;

    display: flex;
    flex-flow: row wrap;
}

/*using ususal shorthand notation*/

.flex-item:nth-child(1) {
   flex:1 100%;
}

.flex-item:nth-child(2) {
    flex:2;
}

.flex-item:nth-child(3) {
    flex:3;
}

这应该将第一个元素的宽度设置为 1000px，接下来的两个分别设置为 400px 和 600px；包裹并显示在第一个 child 下方。

但是由于某些原因，CSS 中断了，第二个和第三个元素被推到了主容器之外。

更奇怪的是，向 flex 元素添加边距可以解决整个问题，我不明白这是怎么发生的(我一定是在做一些愚蠢的事情)。即使向“.flex-item”规则添加一些边框或填充也可以。

.flex-item{
    margin: 5px;
}

这是 JS Fiddle .您可以尝试取消注释 CSS 中的“.flex-item”规则，看看发生了什么。

我懒得不添加任何前缀(因为几乎每个新浏览器都支持它)，但问题在最新的 FF、IE 和 chrome 中都是一样的。

最佳答案

第二个和第三个元素的宽度为0，所以它们可以放在任何地方..

这就是他们留在第一行的方式。

basis只要设置1px，他们就会在第二行

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #555;
}

.main{
	max-width: 1000px;
	margin: 20px auto;
	border: 1px dotted #999;
	padding: 20px;

	display: flex;
	flex-flow: row wrap;
}
/* adding any border, margin, padding rules here fixes it */

.flex-item:nth-child(2) {
	flex:2 1px;
    background-color: lightyellow;
}

.flex-item:nth-child(3) {
	flex:3 1px;
}

.flex-item:nth-child(1) {
	flex:1 100%;
}
	<div class="main">

		<p class="flex-item">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consequat lorem. In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit 

.flex-item:nth-child(2) {
    flex:2 1px;
}

.flex-item:nth-child(3) {
    flex:3 1px;
}

关于html - 无法将 flexbox child 的宽度设置为 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29053113/

flexboxchildflexflex-itemsectionhtmlcssfrontend

有关html - 无法将 flexbox child 的宽度设置为 100%的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  4. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  5. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  8. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  9. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  10. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

随机推荐