フレックスボックスの限界幅

Question

フレックスボックスを使用して.containerの端にコンテンツ:beforeと:afterを配置するにはどうすればよいですか？

私は<を左側に配置し、>を右側に配置しようとしていますが、これらの要素は.containerの幅に従って配置する必要があります。

私が試した：

text-align: left; 
max-width: 50%; 

をしかし、動作しません。私はここで何が欠けていますか？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main { 
 
    background: #ccc; 
 
    width: 100%; 
 
} 
 
.container { 
 
    max-width: 500px; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
    padding: 8px 0; 
 
} 
 
.flexbox { 
 
    display: flex; 
 
    background: blue; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.prev { 
 
    border-right: 1px solid white; 
 
} 
 
.prev::before { 
 
    content: '<'; 
 
} 
 
.next::after { 
 
    content: '>'; 
 
} 
 
.link { 
 
    color: white; 
 
    padding: 16px 0; 
 
    text-decoration: none; 
 
    flex: 0 0 50%; 
 
} 
 
.link:first-child { 
 
    padding-right: 10px; 
 
    text-align: right; 
 
    max-width: 50%; 
 
} 
 
.link:last-child { 
 
    padding-left: 10px; 
 
    text-align: left; 
 
    max-width: 50%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam 
 
    aut assumenda accusamus ex perferendis ipsa aperiam sapiente. 
 
    </div> 
 
</div> 
 
<div class="flexbox"> 
 
    <a href="#" class="link prev">Preview</a> 
 
    <a href="#" class="link next">Next</a> 
 
</div>

https://jsfiddle.net/brunodd/4sq3gufn/1/

Answer 1

まず、.container内.flexboxを置く：

<div class="main"> 
    <div class="container"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam aut assumenda accusamus ex perferendis ipsa aperiam sapiente. 
    <div class="flexbox"> 
     <a href="#" class="link prev">Preview</a> 
     <a href="#" class="link next">Next</a> 
    </div> 
    </div> 
</div> 

その後::beforeと::afterためposition:absoluteを設定します。

.container { 
    max-width: 500px; 
    border: 1px solid red; 
    margin: 0 auto; 
    padding: 8px 0 0 0; 
    position:relative; 
} 

.flexboxの設定幅100vw（ビューポートの幅）も、そして計算するcalcのいくつかの魔法を追加する：<と>はその境界内に保持されますので.containerからposition:relativeを設定

.prev { 
    border-right: 1px solid white; 
    &::before { 
    position:absolute; 
    left:20px; 
    content: '<'; 
    } 
} 

.next { 
    &::after { 
    position:absolute; 
    right:20px; 
    content: '>'; 
    } 
} 

ネガティブmargin-leftは、を中央に維持します。

.flexbox { 
     display: flex; 
     background: blue; 
     justify-content: center; 
     align-items: center; 
     width:100vw; 
     margin-left: calc((-100vw + 100%)/2); 
    } 

アイデアはボックスの下にリンク を持っているのであれば

Working example here

Answer 2

あなたはちょうどあなたがあなたのコード（width: 50%代わりのflex: 0 0 50%）にいくつかの小さなのadjustementsを作ることを考えると、」日をフロートすることができます。

https://jsfiddle.net/4sq3gufn/3/

.link { 
    color: white; 
    padding: 16px 10px; 
    text-decoration: none; 
    width: 50%; 
} 

.prev { 
    border-right: 1px solid white; 
    text-align: right; 
    &::before { 
    content: '<'; 
    float: left; 
    } 
} 

.next { 
    text-align: left; 
    &::after { 
    content: '>'; 
    float: right; 
    } 
} 

Answer 3

あまりにもわかりません。

そうなら、フレックスコンテナにもmax-widthを使用してjustify-contentを更新：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main { 
 
    background: #ccc; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    max-width: 500px; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
    padding: 8px 0; 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    background: blue; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    max-width: 500px; 
 
    margin: auto; 
 
} 
 

 
.prev::before { 
 
    content: '<'; 
 
    padding: 0 5px; 
 
} 
 

 
.next::after { 
 
    content: '>'; 
 
    padding: 0 5px; 
 
} 
 

 
.link { 
 
    color: white; 
 
    padding: 16px 0; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam aut assumenda accusamus ex perferendis ipsa aperiam sapiente. 
 
    </div> 
 
</div> 
 

 

 
<div class="flexbox"> 
 
    <a href="#" class="link prev">Preview</a> 
 
    <a href="#" class="link next">Next</a> 
 
</div>

https://jsfiddle.net/4sq3gufn/6/

または多分これ？幅の半分をカバーするリンクの場合はhttps://jsfiddle.net/4sq3gufn/7/です。