Question

我的内容如下所示

<Container>
<LeftBlock />
<RightBlock/>
<Container>

#container{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

#rightBlock{
display: flex;
    float: right;
}

这可以按预期工作。左侧块位于左侧，右侧位于右侧。有时我想隐藏左侧块

<Container>
{(shouldShow) ? (
<LeftBlock />
) : null }
<RightBlock/>
<Container>

右侧块现在位于左侧。我也尝试了这个，但它没有工作

<Container>
{(shouldShow) ? (
<LeftBlock />
) : (<div></div>) }
<RightBlock/>
<Container>

在div <div>.</div>内部添加一个Char，右侧的块显示在屏幕右侧。我该怎么解决这个问题？我要一个＆＃34;看不见的＆＃34;元素而不是左块？

Answer 1

你的意思是？

你只需要预定义className 取决于shouldShow 例如：className={container ${shouldShow && 'disabled-left-component'}}

<Container> {shouldShow && <LeftBlock />} <RightBlock/> <Container>

Answer 2

试试这个，左边部分有display:none 在父级上使用justify-content:flex-end;使块保持在右侧，并删除左侧块上的浮动

＆＃13;

.flex {
  display:flex;
  width: 500px;
  height: 500px;
  flex-direction: row;
  border: 1px solid black;
  justify-content:flex-end;
}


.left {
  width:50%;
  background-color: teal;
  display:none;
}


.right {
   width:50%;
  background-color: orange;
}

＆＃13;

<div class="flex">
  <div class="left"></div>
  <div class="right"></div>
</div>

＆＃13;

Answer 3

尝试使用css grid.I感觉它更清洁 -

.left{
   grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.right {
 grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.container {
  display: grid;
  grid-column-gap: 15px;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;


}

Answer 4

有多种方法可以解决这个问题。

这里有demo反应

注意：这里我使用jquery作为唯一的演示目的。

添加justify-content: flex-end;

＆＃13;

$("#toggle-left").on('click', function(){
    $('.left').toggle();
});

＆＃13;

#container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
}

.left {
 padding: 50px 0;
 background-color: black;
 flex: 1 1 50%;
 max-width: 50%;
}
.right {
padding: 50px 0;
background-color: red;
flex: 1 1 50%;
max-width: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

<button id="toggle-left">Toggle Left</button>

＆＃13;

在反应中添加不可见元素

4 个答案: