-
11 votesanswersviews
使flex项目在一行上占据整个宽度
我试图在同一行保留前两个子元素，而第三个元素在全宽度下面保持自己，同时使用flex . 我特别感兴趣的是在前2个元素上使用 flex-grow 和 flex-shrink 属性（这是我不使用百分比的原因之一）但是第三个元素必须是全宽并且低于前两个元素 . 当 text 元素更改代码时， label 元素将在 text 元素之后以编程方式添加 . 如何强制标签元素在使用flex定位的其他两个元素下方... -
0 votesanswersviews
折叠flex-column导航时折叠动画看起来很奇怪
我正在尝试使用引导程序4框架在侧边栏中进行导航，该框架显示在小型设备上的页面顶部 . 我的方法： .sidebar { background-image: linear-gradient(180deg, rgb(33, 243, 96) 0%, #077710 70%); } .sidebar .navbar-brand { font-size: 1.1rem; } .nav-item... -
0 votesanswersviews
为什么背景颜色不会改变div的焦点？
我有 div 其中我有 input 和按钮 . 我想更改 background-color 的父 div 当我专注于 input div . 但它无法正常工作 . 我们可以使用 css not javascript 这样做 . 我试过这样的 .a:focus{ background-color:red; border:2px solid grey; } 但它不起作用为什么？ 我希望当 ... -
2 votesanswersviews
使用flex-wrap打破第5个元素后的下一行的问题 .
我一直在使用flexbox创建一个图像库，它具有基于flex的基础转换，可以在悬停时增大和缩小元素 . 我在修改图库时遇到问题，使用flex-wrap打破第5个元素之后的下一行 . 我希望它能够运行的方式是每行有5个元素在同一行上增长和缩小 . 在将第六个元素放入容器后，我想要中断到下一行并使元素继续按预期运行（包括转换） . 元素伸展以填充可用空间（5个元素中每个元素的宽度为20％） ... -
1 votesanswersviews
儿童内部的CSS Flexbox图像比例
我有以下html： <html> <head> <title>asd</title> </head> <body> <div class="wrapper"> <div class="slide slide1"><... -
0 votesanswersviews
图像定位/ div高度与显示flex
我喜欢两个盒子类div的定位和proty-content：flex-end但是我想把顶部的img-container div垂直放在上面的剩余空间中，但是我不确定这是否可能，最好没有JavaScript的 . 该布局适用于纵向移动设备 . 也许证明内容不是最好的方法，但我想要一个布局，将表单元素放在屏幕的底部，并将它们很好地隔开，但通过从徽标区域占用空间来响应较小的设备 . .flexcontai... -
0 votesanswersviews
Quasar Framework Flex类
使用Quasar Framework 0.15，我认为使用Flex相关类没有任何影响 . 一个简单的组件： <template> <q-page class="flex"> <div class="row"> <div class="col-sm-6 justify-center&q... -
1 votesanswersviews
在div中间对齐文本
我一直试图设置一个注册表格 . 我希望 Headers 位于div的中心 . 我旁边还有另一张登录表单 . 我使用弹性框对它们进行了样式设置，然后使用对齐内容作为中心 . 我还想在注册表单和登录表单之间添加一条垂直线 . 我不想使用表单的其中一个边框 . 除了使用表单边框之外还有任何方法可以做到这一点 . 我尝试但没有工作的东西1.text-align：center：2.margin：0 aut... -
454 votesanswersviews
在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？
考虑flex容器的主轴和横轴： 资料来源：W3C 要沿主轴对齐flex项，有一个属性： justify-content 要沿横轴对齐弹性项，有三个属性： align-content align-items align-self 在上图中，主轴是水平的，横轴是垂直的 . 这些是Flex容器的默认方向 . 但是，这些方向可以轻松地与flex-direction属性互换 . /* m... -
0 votesanswersviews
什么在React Native中对容器进行分类？
我已经开始在React native上使用flex box了，在CSS上你应该将显示设置为flex，但是在RN上，这是默认设置的 . 什么对容器对象进行分类，您可以在其中设置alignItems，justifyContent？ 它只需要是一个视图吗？或者每个组件都是潜在的容器？ -
343 votesanswersviews
如何在另一个div内对齐3个div（左/中/右）？
我想在容器div中对齐3个div，如下所示： [[LEFT] [CENTER] [RIGHT]] 容器div是100％宽（没有设置宽度），并且在调整容器大小后中心div应保持在中心 . 所以我设置： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;... -
435 votesanswersviews
如何右键对齐flex项？
是否有更多的flexbox-ish方式来对齐"Contact"而不是使用 position: absolute ？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { positi... -
2 votesanswersviews
Bootstrap 4 - 在flexbox子项上证明内容中心（覆盖flex父容器）
使用Bootstrap 4，我试图将一个img集中在主div的中间位置 . 但是，它不是中心 . 怎么样： <!doctype html> <html lang="en"> <head> <title>Hello, world!</title> ... -
4 votesanswersviews
使用flex CSS项设置折叠优先级？
我有一个 <ul> 元素，其样式是水平列出其内部 <li> 元素： 一个是第一个数字|二是第二个数字|三是第三个数字|四是第四个数字 这适用于较短的内容，但如果没有足够的空间来显示它们，这些"cells"需要以不同的优先级崩溃 without wrapping . ...Something like this: 一个是第一个数字|二是... |三... -
1 votesanswersviews
将输入类型设置为数字会使输入宽度更短
我正在通过Contact Form 7使用wordpress插件进行表单 . 几乎没有样式，只是简单的显示：flex;因此我可以在一行中有两个输入，每个父容器的总容量为100％ . 但是，当我将一个输入类型更改为数字而不是文本时，该输入会缩小并变得更短，并且我有这种奇怪的间距 . 我尝试过很多东西，改变显示，宽度，填充，什么都有，但没有任何帮助 . 使这个数字输入更大的唯一因素是为输入[type ... -
1 votesanswersviews
对象：填充;不工作[重复]
这个问题在这里已有答案： Why isn't object-fit working in flexbox? 2个答案 我用 flexbox 编写了这个响应式图库代码 我将每个 flexbox_item 的背景颜色样式设置为青色，以显示每个flexbox_item块的尺寸： background-color: cyan; 现在我想要图像填充他们的块，所以我使用： object-fit: fil... -
2 votesanswersviews
除了Chrome之外，无法在Flexbox流中包装列
如何修复“content”div的最大高度 . 该代码仅适用于Chrome：/ “content”div不应该扩展到窗口底部之外 . 这些物品应该包裹在右边 . item1 item4 item7 item2 item5 ... item3 item6 HTML <div class="top"> <div class="title"... -
1 votesanswersviews
React原生元素列表宽度太窄
我在这里使用react-native-elements列表：https://react-native-training.github.io/react-native-elements/API/lists/ 当我用 flex: 1 渲染它时，它非常狭窄 . 当我使用 width: 400 渲染它时就可以了 . 以下是款式： container: { flex: 1, ... -
0 votesanswersviews
在React-native中无法更改自定义组件的宽度和高度？
我有一个像这样的最小的自定义无状态组件： const ViewBox = (props) => ( <View style={ mainStyle : {backgroundColor: 'beige'} }> {props.children} </View> ) export default ViewBox; 所以我想导入并在另一个... -
1 votesanswersviews
如果指定了文本溢出，浏览器如何计算弹性框的宽度
所有： 如果我设置了flexbox文本溢出：省略号;并将其flex指定为1 1 auto;当我收缩那个flexbox时，浏览器如何计算auto的值？ <style> .flexcontainer { display:flex; flex-flow: row nowrap; width:100%; height:au... -
2 votesanswersviews
Flex行5个div，一个具有静态宽度，另外四个具有百分比
我有一排有5列 . 第一列是我希望保持150px恒定宽度的轮廓图 . 其他四个有各种输入/按钮，我希望它们每个都是基于百分比，并且flex增长以填充剩余空间，第一列应始终保持在150px . 我目前的设置是： <div class="flex-row"> <div class="column-1">content</di... -
0 votesanswersviews
flex模型：第二行，第一行元素的宽度
我完全不了解flex模型 . 在此示例中，第一行（第一行和第二行）的元素应显示在一行中：第一个元素200px和第二个元素应具有剩余空间 . .wrapper { display: flex; width: 100%; } .first { width: 200px; background: red; } .second { flex: 1; ... -
2 votesanswersviews
Flex容器内的单个项目的全宽
我正在开发一个响应式设计，我真的不想改变HTML标记，而是让我有所作为 . 我有一个容器有三个元素（一个类别，一个图像缩略图和一个包含文本的div） . HTML <article class="featured"> <div class="category"> <a href="/#/#/"&g... -
68 votesanswersviews
使flex项目占用内容宽度，而不是父容器的宽度
我有一个容器 <div> 与 display: flex . 它有一个孩子 <a> . 如何让孩子显得“内联”？ 具体来说，如何使孩子的宽度由其内容决定，而不是扩展到父母的宽度？ What I tried: 我将孩子设置为 display: inline-flex ，但它仍然占据了整个宽度 . 我也尝试了所有其他显示属性，但没有任何效果 . Example: .cont... -
5 votesanswersviews
使用CSS flexbox或网格布局的响应式图库
我正在开发一个Image-Gallery-Widget，用户可以在其中设置缩略图宽度，缩略图高度和边距（缩略图之间），小部件将在一个漂亮的网格中显示所有图像-thumnails，其中每个图像具有相同的宽度和高度 . I am wondering whether css-flexbox or css-grid makes this possible without the need to defin... -
1 votesanswersviews
在flex-wrap元素中设置图像的高度
如果我使用flex box wrap创建一个2x2 div的网格，那么在每个div中放置一个图像： - <div id="wrapper"> <div class="item"><img src="http://via.placeholder.com/100x500"></div> ... -
146 votesanswersviews
React Native Flexbox中的宽度为100％
我已经阅读了几个flexbox教程，但我仍然无法完成这个简单的任务 . 如何将红色框设为100％宽度？ 码： <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text styl... -
34 votesanswersviews
Flex包装中的行换行不包装在Safari中
一个弹性容器有四个孩子，每个孩子的灵活度为25％，最小宽度 . flex-flow设置为row wrap . Safari之外的浏览器按预期处理这个：如果达到最小宽度，它将下一个项目包装到下一行 . 在Safari中，它会溢出容器 . 在这里查看演示：http://codepen.io/lbilharz/pen/aJbkI 玉 h1 Why this ain't wrappin' in mob... -
54 votesanswersviews
Angular 2 Material Design Components是否支持布局指令？
我正在尝试使用Angular2 Material Design组件，我无法使layout directives工作 . 例： 根据这些例子，这应该“正常”： <div layout="row"> <div flex>First item in row</div> <div flex>Second item in row&l... -
161 votesanswersviews
Chrome / Safari不会填充100％高度的flex父级
我想要一个具有特定高度的垂直菜单 . 每个孩子必须填写父母的高度并且具有中间对齐的文本 . 孩子的数量是随机的，所以我必须使用动态值 . Div .container 包含一个随机数的子节点（ .item ），它们总是必须填充父节点的高度 . 为了实现这一点，我使用了flexbox . 为了使文本链接与中间对齐，我正在使用 display: table-cell 技术 . 但使用桌面显示需要使用...