小编LGS*_*Son的帖子
CSS Flexbox - 根据屏幕大小组织弹性项目
我有一个 flex 项目的容器，我试图根据屏幕大小在不同的布局中组织不同数量的 flex 项目。例如，在桌面上，我想要有 4 个容器，每个容器有 2 个项目，排列在 2x4 网格中，每个单元格是 1x2。我似乎无法理解的是完全使用 flexbox 在平板电脑上获得布局。任何指向正确方向的指针都会很棒。
div {
box-sizing: border-box;
width: 100%;
}
.container {
display: flex;
border: 1px solid red;
flex-wrap: wrap;
flex-direction: row;
padding: 10px;
}
.cell {
display: flex;
flex: 50%;
padding: 10px;
border: 1px solid blue;
height: 100px;
}
.data {
width: 100%;
justify-content: middle;
flex: 1;
border: 1px solid green;
}
@media only screen and (max-width: 1024px) {
.container {
display: inline-block;
position: relative;
}
#cell1 { …推荐指数
解决办法
查看次数
使用 css3 反转边框半径
自从 3 个小时以来，我一直在努力寻找如何反转边界半径，我在 css3 中专门为此看到了一个小代码，但我找不到它......
你必须知道我正在使用 wordpress（不幸的是）
有想法吗？
推荐指数
解决办法
查看次数
带有图像子项的 flex 项目无法正确调整其大小
我发现这篇文章，带有图像子项的 Flex 项目不会从其原始宽度进行调整，我最初认为这是有答案的，但它没有，......当使用设置高度时，部分确实如此。
我想要并期望在这里发生的是图像与文本元素的高度匹配，然后在保持其比例的同时调整其宽度。
这似乎适用于 Chrome，但不适用于 Edge/IE/Firefox。由于我没有 iOS 设备，因此无法测试 Safari，所以如果有人可以分享它如何/是否在那里工作，我将不胜感激。
这不需要是一个flexbox解决方案，尽管我希望有一个 CSS 解决方案，这意味着没有 script。
编辑
给定文本的高度可以是动态的，并且基于其内容，因此预定义200px只是简单地给它一个高度，JSFiddle 演示，设置高度 。
堆栈片段
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some …推荐指数
解决办法
查看次数
与translateY(-50%)垂直对齐给出一个混蛋？
我如何修复下面的代码..我使用了transform:translateY(-50%)的技术使div垂直居中.但是当我将它与动画一起使用时,它首先需要top:50%它翻译给一个混蛋 ..我不希望这个混蛋发生,元素应该自动进入中心.
body,
html {
height: 100%;
background: #c9edff;
text-align: center;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
font-family: arial;
font-size: 20px;
line-height: 1.8em;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}<div class="element">
Vertical Align is Awesome!
<br /> But with …推荐指数
解决办法
查看次数
Flexbox在网格中的边距
我在flexbox中有一个网格,如下所示:
它们都是使用flexbox定位的,然后是面板本身(彩色位)margin: 5px.
codepen:https://codepen.io/callumacrae/pen/bRoZdp
因为右上角有两个元素,那里有更多的余量,所以它稍微向下推 - 我不希望这种情况发生!
我想两个可能的修复方法是让边距不要这样做,或者使组件小五个像素而不是像现在这样大五个像素 - 但我不知道如何做其中任何一个.
如何添加更多元素而不更改父级的大小？
推荐指数
解决办法
查看次数
如何使用flexbox将网页分成四个部分？
如何使用弹性框将网页分成四个相等的部分？像这个网站的东西 - www.rileyjshaw.com
列应该能够在较小的视图端口上相互堆叠.
编辑/更新:
到目前为止,我已经尝试过这个 - 我应该改变线高吗？如何实现不同的块？
/* Grid */
.column {
flex-basis: 100%;
width: 50%;
height: 50%;
line-height: 200px;
}
@media screen and (min-width: 800px) {
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
flex: 1;
}
._25 {
flex: 2.5;
}
._5 {
flex: 5;
}
}
/* Style */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
}
.column {
/* padding: 15px;
border: 1px solid #666;
margin: …推荐指数
解决办法
查看次数
Flexbox 大小像表格单元格一样？
我遇到了 Flexbox 的问题。我尝试了很多变体但还没有找到解决方案。
我需要子元素与父容器一起拉伸。
第一行的宽度还可以，但背景也应该根据内容拉伸。
关于第二行，背景拉伸很好，但它需要相等的宽度，并且我需要宽度取决于内容，例如自动宽度......
我需要它像在变体 3 中使用 , 时一样拉伸display: table。
.row {
display: flex;
justify-content: space-around;
margin: 20px;
color: #fff;
}
.row .col {
min-height: 40px;
background: #333;
padding: 10px;
}
.row-v2 {
flex-wrap: wrap;
}
.row-v2 .col {
flex: 1;
}
.row-table {
width: 100%;
display: table;
}
.col:nth-child(2) {
background: #666;
}
.row-table .col {
display: table-cell;
padding: 10px;
background: #333;
color: #fff;
}<h1>Variant 1</h1> …推荐指数
解决办法
查看次数
flex 中的 order 属性是否有任何开始和结束？
我想知道在 flex 容器中排列元素是否有任何开始或结束编号？例如 ：
.firstOrder {
order: <First-Item>
}
为什么 ？因为我想创建一个CSS框架，所以我想知道我可以添加2个类来订购First item和Last item。
推荐指数
解决办法
查看次数
Flexbox - 容器宽度自动
如何使 ulin的 .menu-sub-col宽度等于内容宽度？
https://fiddle.jshell.net/j9ujfL2n/3/
.menu {
position: absolute;
z-index: 90;
display: flex;
flex-direction: row;
top: 40px;
left: 0;
transition: transform 0.25s ease-in-out;
transform: translateY(-100%);
visibility: hidden;
}
.menu--visible {
transform: translateY(0);
visibility: visible;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu li {
cursor: pointer;
}
.menu-main {
background-color: #3E5AE2;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
height: max-content;
}
.menu-main li {
position: relative;
padding: 10px 20px;
border-bottom: 1px solid rgba(0, 0, …推荐指数
解决办法
查看次数
当 flex-wrap 用纯 CSS 包裹元素时移除 margin-right
我有一个包装纸和里面的一些物品。我想在每一行中将两个项目并排放置。我曾经flexbox解决过这个问题。
我的包装器具有属性flex-wrap: wrap;，我的物品具有属性：flex: 0 0 45%;。所以我的每个项目都使用了行的 50%（包括边距）。我margin过去常常在项目之间在右侧和底部留出一个间隙。这几乎按我的预期工作。
现在我的问题是：有没有办法忽略margin-right每行中的第二个项目（它包裹的地方），所以第二个项目也与左侧项目相同的包装器右侧对齐。目前，由于margin-right. 我想消除这个差距。这可以用 pureCSS吗？last-child只是删除margin-right最后一项上的 ，但这很清楚原因。有没有办法在行的末尾将其删除，物品包装在哪里？希望这已经足够清楚了。
在我的片段下面：
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border: 1px solid black;
width: 768px;
}
.wrapper__item {
flex: 0 0 45%;
width: 330px;
height: 160px;
margin: 0 36px 18px 0;
background-color: lightcoral;
}<div class="wrapper">
<div class="wrapper__item">Item</div>
<div class="wrapper__item">Item</div>
<div class="wrapper__item">Item</div>
<div class="wrapper__item">Item</div>
<div class="wrapper__item">Item</div>
<div class="wrapper__item">Item</div>
</div>这也是我想删除边距的屏幕截图（见箭头）：
推荐指数
解决办法
查看次数