CSS3でこのようなスタイルを作成するにはどうすればよいですか？

Question

私はCSS3でこのスタイルを取得したいと思います：今のところ

CSS3 layout

、私は最も簡単な方法は、次のコードで真ん中の正方形があります。

HTML（かなり無関係に、私は推測します

<div id="divBorder"> 
</div> 

CSS：

#divBorder{ 
    border-style: solid; 
    border-width: 1px; 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    z-index: 15; 
    top: 50%; 
    left: 50%; 
    margin: -110px 0 0 -160px; 
} 

タグは、divタグ）である必要はありません。

私は基本的に中央の四角形を画面の中央に配置しています。それだけで、完全なものの両側にある他の2つの半角を行う方法は見つかりません。

私があなたを助けてくれることを願っております、あらかじめありがとうございます！

Answer 1

flexboxを使用して、次のマークアップで目的のレイアウトを実現できます。あなたがこれを行うにはフレキシボックスを使用することができます

body { 
 
    margin: 0; 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
header { 
 
    flex: 1; 
 
    background-color: mediumspringgreen; 
 
} 
 

 
div { 
 
    flex: 4; 
 
    display: flex; 
 
    background-color: darkviolet; 
 
} 
 

 
section { 
 
    flex: 1; 
 
} 
 

 
section:nth-child(even) { 
 
    flex: 2; 
 
    background-color: darkorchid; 
 
} 
 

 
footer { 
 
    flex: 1; 
 
    background-color: deeppink; 
 
}

<main> 
 
    <header></header> 
 
    <div> 
 
    <section></section> 
 
    <section></section> 
 
    <section></section> 
 
    </div> 
 
    <footer></footer> 
 
</main>

Answer 2

.inner { 
 
border:solid; 
 

 

 
} 
 

 
.outer {display: flex; 
 
flex-direction:row;} 
 

 
.side {width: 25%; height: 50px;} 
 

 
.center {width: 50%; height: 50px}

<div class="outer"> 
 
<div class="side inner"></div> 
 
<div class="center inner"></div> 
 
<div class="side inner"></div> 
 
</div>

。あなたはprocentageで幅を設定することも、flexboxでサイズを調べることもできます。