所以我试图重现这个样式:
上面的这种表格是通过Redux动态提取的:
class LocationList extends React.Component {
componentDidMount() {
this.props.fetchLocations();
}
renderLocation() {
return this.props.locations.map(location => {
return (
<div className="" key={location.id}>
<div className="location">
<h1>
{location.name}
{location.airport_code}
</h1>
<div className="location-secondary-info">
<span>
<MaterialIcon icon="airplanemode_active" />
{location.description}
</span>
</div>
</div>
</div>
);
});
}
render() {
return <div className="locations-container">{this.renderLocation()}</div>;
}
}
但是,我无法正确使用样式。所以你在上面看到的是可以垂直方式滚动的。
我在JSX中无法正常操作,因此我决定使用Codepen.io。
我似乎无法获得该表格格式,因此它只是像一个大行一样水平滚动。
.locations-container {
display: flex;
justify-content: center;
padding: 0 24px;
overflow-y: scroll;
}
.locations-container div {
display: flex;
flex: 0 1 1152px;
flex-flow: wrap;
}
.location {
border-left: 2px solid #49aaca;
padding: 14px;
margin: 12px 0;
flex: 1 1;
min-width: 275px;
max-width: 355px;
}
.location h1 {
padding: 0;
margin: 0;
font-family: sans-serif;
font-weight: 500;
font-size: 20px;
color: #454545;
text-transform: uppercase;
}
.location span {
font-family: "Roboto", sans-serif;
font-size: 12px;
color: #a3a3a3;
}
.location:hover {
background-color: #49aaca;
}
.location:hover h1 {
color: #fff;
}
.location:hover span {
color: #fff;
}
<div class="locations-container">
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
</div>
所以我用纯HTML和CSS复制了它。显然,我不太了解Flex以找出最后一块设计。
你需要在容器上声明flex-wrap: wrap
(.locations-container
)。因为它会覆盖默认值,即nowrap
。如果设置overflow-y: scroll
,则需要定义高度。示例:height:200px;
另外要修复只有3个项目你可以替换flex: 1 0 1152px;
,我不知道为什么你使用1152px,但%应该更好:flex: 1 0 30%;
使用flex-grow: 1
在flex
速记中定义,flex-basis
不需要33%,这实际上会因为边距和填充而导致每行项目更少。
由于flex-grow
会消耗行上的自由空间,因此flex-basis
只需要足够大以强制执行换行。在这种情况下,使用flex-basis: 30%
,边距有足够的空间,但从来没有足够的空间容纳不需要的物品。请注意,因为你有min-width
,如果它没有所需的空间,那么每行不会有3个项目。
你可以使用media query
来回应问题。在我的例子中,我使用width:952px;
.locations-container {
display: flex;
/*justify-content: center;
padding: 0 24px;*/
overflow-y: scroll; /*if you set overflow-y: scroll, you need to define the height.example:*/
height:200px;
width: 952px; /*demo purpose since you had min-width*/
flex-wrap: wrap; /*flex-wrap: wrap on the container. Is necessary, because it overrides the default value, which is nowrap*/
}
@media (min-width: 952px){
.locations-container{
width: 100%;
}
}
.locations-container div {
display: flex;
/*flex: 1 0 1152px;*//*I'm not sure why you use 1152px, but % should be preferable*/
flex: 1 0 30%;
/*flex-flow: wrap;*//*doesn't seem to do anything*/
}
.location {
border-left: 2px solid #49aaca;
padding: 14px;
margin: 12px 0;
flex: 1 1;
min-width: 275px;
max-width: 355px;
}
.location h1 {
padding: 0;
margin: 0;
font-family: sans-serif;
font-weight: 500;
font-size: 20px;
color: #454545;
text-transform: uppercase;
}
.location span {
font-family: "Roboto", sans-serif;
font-size: 12px;
color: #a3a3a3;
}
.location:hover {
background-color: #49aaca;
}
.location:hover h1 {
color: #fff;
}
.location:hover span {
color: #fff;
}
<div class="locations-container">
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
</div>