CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。
我尝试搜索但找不到完全相同的问题，所以将其发布在这里。 因此，我在带有行换行的柔性包装器内有一些块 div，并且我希望包装器有一个边框。 ...
在主体上使用溢出隐藏以及“仅 sr”元素可能会导致滚动错误？
我在开发的应用程序中遇到了一个奇怪的问题。我最初使用 svelte 和 tailwind css，但是我在纯 html/css 中重现了这个问题。 为了实现非滚动标题...
我必须制作一个背景为白色且字体颜色为渐变的按钮。我已经完成了CSS代码，但它不起作用。 按钮 { 背景：#fff； 字体粗细：600； 颜色：线性渐变...
仅水平裁剪图像/`max-width: 100%`不限制图像大小？
考虑以下样式： 。容器 { 显示：柔性； 宽度：100vw； } .container > div { 最小宽度：20rem； } .container > img { 对象适配：覆盖； 高度：100vh； 宽度：10...
有没有一种方法可以使用CSS和HTML在桌面上并排显示列，并在移动设备上显示一个在另一个下面的列？
我是 HTML 和 CSS 新手，我正在尝试格式化代码结果，以便页面具有响应能力，并且它在移动设备上看起来是一种方式，在桌面上看起来是另一种方式，以获得更好的可读性。我已经做了...
为什么 bootstrap 中的 flexbox 没有表现出应有的行为？
我必须使用 html、bootstrap 和 css 编辑一个已经制作好的复杂项目（在 php 中）。 Flexbox 无法正确响应。我需要连续两张卡。我尝试在空文件中执行此操作...
我正在制作篮球记分板，我想知道如何将记分板容器内的得分文本居中？ 虽然主 div 已设置为 Flex 容器，但 p 分数文本位于...
当用户扩展浏览器窗口时，我希望我的 css 弹性框最多有 3 列。使用我当前的代码，它可以正确地向内弯曲，没有最小列数，但是当
flexWrap 不适用于 React Native 中的 <Text> 元素
这是我的场景 var FlexWrap = React.createClass({ 渲染：函数（）{ 返回（ 这是我的场景 var FlexWrap = React.createClass({ render:function(){ return(<View style={{flexDirection:'row'}}> <Image source={{uri:profileImage}} style={{width:100,height:100}}> </Image> <View style={{marginLeft:5}}> <Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap'}}> This sample text should be wrap wrap wrap .... </Text> <Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap'}}> This sample text should be wrap wrap wrap .... </Text> </View> </View>) } }) 这里 “此示例文本应该换行换行......” 是单曲 线，但在我的场景中，根据窗口宽度自动 文本应该换行。 这里我使用 flexWrap: 'wrap' 来换行，但是正确的换行方式是什么？ 请查看截图 将 flex: 1 设置为文本的包装视图 var FlexWrap = React.createClass({ render:function(){ return(<View style={{flexDirection:'row'}}> <Image source={{uri:profileImage}} style={{width:100,height:100}}> </Image> <View style={{marginLeft:5,flex:1}}>//<=== ADDED flex:1 <Text style={{marginTop:5, marginBottom:5 }}> This sample text should be wrap wrap wrap .... </Text> <Text style={{marginTop:5, marginBottom:5 }}> This sample text should be wrap wrap wrap .... </Text> </View> </View>) } }) 帮助链接 我认为如果您在样式表中为文本指定 flex 属性，它将自动换行。 <Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap', **flex: 5,** }}> var FlexWrap = React.createClass({ render:function(){ return(<View style={{flexDirection:'row'}}> <Image source={{uri:profileImage}} style={{width:100,height:100}}> </Image> <View style={{marginLeft:5,flex:1,flexDirection:'column', flexWrap:'wrap'}}>// Changes here <Text style={{marginTop:5, marginBottom:5 }}> This sample text should be wrap wrap wrap .... </Text> <Text style={{marginTop:5, marginBottom:5 }}> This sample text should be wrap wrap wrap .... </Text> </View> </View>) } }) 如果你改变你的弯曲方向并包裹它，你就会得到你想要的结果 您只需执行以下操作即可： <View style={{ flex: 1 }}> <Text>Your Text</Text> </View>
我正在开发一个项目，我的列表项之间必须有 12px 的间隙，然后其他所有项目之间的间隙必须为 24px，但出于某种原因，无论我尝试什么，它都不允许我进行差异。 ..
我有一个容器，里面有多个弹性元素，由间隙隔开。这些元素包裹在容器内，并具有基于百分比的大小，指示单行中可以出现多少个元素（...
我正在尝试使用CSS格式化网页，使其看起来像这样： 这个想法是页面响应如下；红色和蓝色列（左和右）应各自具有设定的宽度。
我有一个列表，我想水平显示我的 li 元素，每行 3 个。我一直在努力得到我想要的东西，但没有运气。有解决办法吗？ ... 我有一个列表，我想水平显示我的 li 元素，每行 3 个。我一直在努力得到我想要的东西，但没有运气。有解决办法吗？ <div class="serv"> <ul> @foreach(App\Http\Controllers\HomeController::getservice($service->id) as $key => $value) <li> <span class="h3-service">{{$value->title}}</span> <p>{!!$value->description!!}</p> </li> @endforeach </ul> </div> .serv ul { display: inline-flex; margin: 0; padding: 0; width: 33%; text-align: left; float: left; } .serv ul li { list-style: none; display: inline-block; padding: 0; } .serv ul li span { padding: 0; } 对于弹性容器： 您可能想使用 display: flex; 而不是 inline-flex。 添加 flex-wrap: wrap; 以允许物品在需要时包裹。 删除 width: 33%;，这样它就会占用整个可用空间。 对于每行 3 个项目，将这些添加到弹性项目中： flex-grow: 0; + flex-shrink: 0; + flex-basis: 33.3333%; 或使用简写 flex: 0 0 33.3333%; .serv ul { display: flex; flex-wrap: wrap; padding-left: 0; } .serv li { list-style: none; flex: 0 0 33.3333%; outline: 1px solid; } <div class="serv"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> 编辑 要将 gap 添加到 Flexbox，请参阅此 post。 但是，使用 CSS 网格要容易得多： .serv ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-left: 0; } .serv li { list-style: none; outline: 1px solid; } <div class="serv"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> 我也遇到了同样的问题，但所选的正确答案不起作用，因为我的子项目需要有固定宽度，所以这是我的解决方案，在DISPLAY：FLEX上显示X个固定宽度的项目。 // Flex item width required: 215px // Flex item margin 20px on each side: 215px + 20 + 20 = 255px // I needed 3(your item per row) so: 255px * 3 // Then to (100% of parent-flex minus 255 * 3) / 2 padding on each side // So it stays in the center. padding: 40px calc((100% - (255px * 3)) / 2); *, *::before, *::after { box-sizing: border-box; } .parent-flex { display: flex; flex-wrap: wrap; justify-content: center; background-color: tomato; padding: 40px calc((100% - (255px * 3)) / 2); } .flex-item { height: 100px; flex: 0 0 215px; margin: 1em 20px; border: 2px blue solid; } <div class="parent-flex"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div> body { margin: 0px; } .parent { display: flex; flex-wrap: wrap; justify-content: center; } .flex-item{ /* All you need to do this play with this number (343) according to aviable width and item width Formula: (ParentWidth / 3) - margin (ParentWidth divide by 3 subtracte by margin[if you want e.g in my case i set 10] ) Stackoverflow Run Code Snippet width = 633.82px (not sure) Margin = 10px */ flex: 0 0 192px; /* play with this number */ background: red; margin: 10px; } <div class="parent"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> </div>
我想创建从数组填充的 html 视图。 该视图有两列，根据元素类型，我想将元素放在桌面 vi 的左列或右列中...
我很困惑为什么我的弹性收缩不起作用，直到我在我想要比其他项目收缩得更快的项目上设置固定的宽度或高度。 https://codepen.io/MH-123/pen/ExJWQWq 你可以在这里看到哦...
如何使 Flexbox 容器中的项目在悬停时展开至 2 列而不移动/影响其余项目？
我正在尝试在 Webflow 上重新创建此交互。 预期结果 到目前为止，我已经成功地重现了这个 一切正常，除了每行的第三列项目向下移动......
原帖如下： 我重现了一个减少的问题： https://codepen.io/MH-123/pen/ExJWQWq?editors=1100 这是代码笔，请阅读下面的问题，它保持不变。我有两个 div，但是 f...
我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 ... 我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="cloud-icon"> <svg>...</svg> </div> </nav> 这是code-pen示例。我非常努力地完成这项工作，因此我们将不胜感激任何和所有反馈。 我尝试过使用 flex-box、css-grid 和边距来做到这一点，老实说，只是让它定位并保持在右侧，我就陷入困境，更不用说移动响应了。 我编辑了 svg 视图框以使其居中 :root { --beige: #d9d9d9; } .contents { height: 100vh; width: 115%; margin: 0; display: grid; grid-template-columns: 1fr auto; } body { margin: 0; } nav { background-color: var(--beige); width: 50%; display: flex; } nav ul { list-style-type: none; margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } nav li { padding: 3%; } nav a { text-decoration: none; font-size: 1rem; letter-spacing: 11px; } .cloud { grid-column: 2; align-self: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="contents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <span class="cloud"> <svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg"> <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/> </svg> </span> </body> </html>