小编LGS*_*Son的帖子
CSS3 - Flex包装不适用于IOS 10.1.1 Safari和Chrome
我正在尝试使用flex wrap和min-width:50%来动态网格布局,其中单个单元占据所有宽度.问题是它在iOS 10.1.1(iPhone 5c)Safari和Chrome中无法正常工作 - 显示器不是网格状,而是水平布局.在桌面Chrome(Ubuntu)和Android Chrome工作正常.
Jsfiddle演示:https://jsfiddle.net/9dscc1Lq/
码:
<style>
body {
width: 300px;
}
.tabs {
width: 100%;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
box-sizing: border-box;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
min-width: 50%;
box-sizing: border-box;
flex: 1 1 0;
-webkit-flex: 1 1 0;
text-align: center;
}
</style>
<div class="tabs">
<div class="gwt-HTML tab">1</div>
<div class="gwt-HTML tab">2</div>
<div class="gwt-HTML …推荐指数
解决办法
查看次数
flex项的子元素的z-index
我想要一个.tag-preview-containerflex item(.image-container)的绝对定位子元素()来重叠DOM中的其他元素(例如标题.header).我z-index将绝对定位元素设置为2(即使1应该工作).但是,该元素不会与flex容器(.tags-panel)外部的任何DOM元素重叠.事实上,它完全被容器切断了.我没有设置DOM中任何其他元素的z-index,因此根应该是堆叠上下文.
<div class="panel-container">
<div class="header">
</div>
<div class="tags-panel">
<div class="image-container">
<div class="tag-preview-container">
</div>
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
</div>
</div>
这是scss代码,这里是JSFiddle
.panel-container {
width: 400px;
height: 400px;
position: relative;
margin: auto;
.header {
width: 100%;
height: 40px;
background-color: green;
}
.tags-panel {
position: absolute;
background-color: red;
top: 40px;
bottom: 0px;
width: 100%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
} …推荐指数
解决办法
查看次数
如何禁用输入建议？
我试图防止在我创建的输入框中出现建议。
<input type="text" class="form-control" name="message" id="msg"
placeholder="Type a message" autocomplete="false">但是即使autocomplete="false"我仍然得到以下信息：
我不希望建议显示在输入框中。
推荐指数
解决办法
查看次数
如何仅从左到右扩展
这是我的css代码
body
{
transform: scaleX(0.67);
}
在这个我的整个网站从右和左缩小.但我只需要从左侧缩放我该怎么做
推荐指数
解决办法
查看次数
弹性格网：左右交替
使用Flexbox：我想在包含div的一些垂直下方放置一系列div。其中每个div L＆R是容器div宽度的70％。L div必须固定在容器的左侧，R div必须固定在容器的右侧。
L
R
L
L
R
R
R
L
推荐指数
解决办法
查看次数
React 和 Flex 布局如何使用它们
我正在尝试使用 React 和 flexbox。通常我可以在 react native 中使用 flexbox 但在 react.js 中无法实现
这是我的 CSS 文件
.wrapper, html, body {
height:100%;
margin:0;
position:absolute;
}
.wrapper {
display: flex;
flex-direction: column;
}
.nav {
background-color: red;
flex:1
}
.main {
background-color: blue;
flex:1
}
这是我的js文件
import React, { Component } from 'react';
import './background.css';
import { Icon } from 'semantic-ui-react'
import Navbar from './navbar'
class Back extends Component {
render() {
return (
<div className="wrapper">
<div className="nav"></div>
<div className="main"></div>
</div>
);
}
} …推荐指数
解决办法
查看次数
如何使用flexbox将最后一个元素放置在列的末尾？
我正在尝试使用flexbox将最后一项放置在垂直导航栏的底部。有没有办法使用flexbox做到这一点？
这是代码示例：
<!doctype html>
<html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
background: red;
width: 100px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
}
li {
border: 1px solid blue;
}
li:last-child {
background: blue;
align-self: end;
}
</style>
<body>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
</body>
</html>
推荐指数
解决办法
查看次数
最小高度无法正常工作？
我正在尝试创建一个最小高度为 100% 的 DIV，这在 FireFox / IE 中不起作用。仅当使用“高度”属性时它才有效。
Chrome 运行正常。
<style>
.page{
min-height:100%;
border:1px solid black;
}
</style>
<html>
<div class="page">
With firefox / IE, this div is not stretching to take 100% of the total page height.
</div>
</html>
更新：
我知道我需要定义 body/html 的高度。这就说得通了。但即使使用这个解决方案，我仍然无法对子 div 使用 min-height 。请参阅下面的示例。子 div 没有占用父 div 的 33%。（在 Firefox 和 IE 中）
<style>
.page{
min-height:100%;
border:1px solid black;
}
html,
body {
height: 100%;
}
.child{
min-height:33%;
border:1px solid black;
display:flex;
}
</style>
<html>
<div …推荐指数
解决办法
查看次数
如何使用flexbox实现包含侧边栏内容的浮动侧边栏布局？
我正在尝试在桌面上实现响应式布局:
在移动设备上这样:
请注意以下要求:
- 边栏应该只占用适合内容所需的垂直空间.在侧边栏下方,主要部分的内容应占据整个宽度.
- 在移动设备上,侧边栏应显示在主要内容下方.
这是一个包含我的初始HTML和CSS的jsfiddle:
https://jsfiddle.net/sergkr/np6k2tj3/
和一个片段:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
margin: 1.6em 0;
}
section>h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section>p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
padding: 0 2em;
background: #fbf6f4;
}
@media screen …推荐指数
解决办法
查看次数
如何使弹性项目可滚动并溢出内容、列
我有一支笔，是我凑起来的。我有一个面板部分，里面有方形 div，具有列方向，但由于某种原因，我无法使该面板部分可滚动以适应内部的 div 的高度。我尝试了overflow-y:auto，但它的行为不正常。现在，盒子只是收缩到位。
.panel-section {
flex-basis: 18vw;
background-color: #BFFD19;
padding-top: 15px;
padding-left: 15px;
padding-right: 30px;
min-height: 0px;
display: flex;
flex-direction: column;
.thumbnail-holder {
margin-bottom: 15px;
background-color: #6036AD;
width: 95%;
height: 160px;
}
}
}
https://codepen.io/anon/pen/OzKKgy
面板部分（右侧）和框是缩略图支架。我读过有关溢出的其他文章，但这些技术对我不起作用。
推荐指数
解决办法
查看次数