flexbox - Tab Using Pure CSS Flex Concept -
how separate flex item flex container , make block width 100% using css without positioning?
my html structure:
<div class="container"> <div style="display:flex;"> <div>tab</div> <div class="block-container">content</div> </div> </div>
the rule need add flex-wrap: wrap;
. once add .container
, making .block-container
100% wide forces new line, away .tab
.
.container { display:flex; flex-wrap: wrap; } .tab, .block-container { padding: 1em; border: 1px solid #ccc; text-align: center; } .tab { border-bottom: 1px solid white; position: relative; top: 1px; } .block-container { flex: 0 0 100%; }
<div class="container"> <div class="tab">tab</div> <div class="block-container">content</div> </div>
Comments
Post a Comment