0
CSSのフレックスを使用してdivを整列させるのに少し問題があります。下の図は、私はそれをすべてをCSS：3つのdivを持つフレックスコンテナ
ここではすべての私のCSSだを設定し、HTMLがas a fiddleをアップロードし、さしたい方法を示してスニペットとして：
@font-face {
\t \t \t font-family: Comfortaa;
\t \t \t src: url("Comfortaa-Light.ttf") format("truetype");
\t \t }
\t \t @font-face {
\t \t \t font-family: Neue;
\t \t \t src: url("HelveticaNeue-Thin.otf") format("opentype");
\t \t }
\t \t body {
\t \t \t position: absolute;
\t \t \t margin: 0px;
\t \t \t top: 0px;
\t \t \t left: 0px;
\t \t \t bottom: 0px;
\t \t \t right: 0px;
\t \t \t overflow-y: scroll;
\t \t \t overflow-x: hidden;
\t \t \t background-color: white;
\t \t }
\t \t #topSegment {
\t \t \t position: relative;
\t \t \t display: flex;
\t \t \t flex-flow: row wrap;
\t \t \t width: 100%;
\t \t \t height: 600px;
\t \t \t top: 0px;
\t \t \t left: 0px;
\t \t \t bottom: 0px;
\t \t \t right: 0px;
\t \t \t background: purple; /* For browsers that do not support gradients */
\t \t \t background: -webkit-linear-gradient(left top, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Safari 5.1 to 6.0 */
\t \t \t background: -o-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Opera 11.1 to 12.0 */
\t \t \t background: -moz-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Firefox 3.6 to 15 */
\t \t \t background: linear-gradient(to bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* Standard syntax */
\t \t }
\t \t #frontLogo {
\t \t \t width: 369.9px;
\t \t \t height: 350px;
\t \t \t margin: 125px; \t \t
\t \t }
\t \t #searchBar {
\t \t \t flex: 1;
\t \t \t margin-right: 125px;
\t \t \t margin-left: 0px;
\t \t \t margin-top: 75px;
\t \t \t margin-bottom: 75px;
\t \t \t background-color: rgb(74,74,74);
\t \t \t height: 50px;
\t \t \t border-radius: 25px;
\t \t }
\t \t #weatherInformation {
\t \t \t flex: 1;
\t \t \t margin: 125px;
\t \t \t margin-left: 0px; \t \t
\t \t }
\t \t #weatherInformation p{
\t \t \t margin: 0px;
\t \t \t font-family: 'Open Sans', sans-serif;
\t \t \t font-weight: 300;
\t \t \t color: white;
\t \t \t font-size: 2em;
\t \t }
\t \t #underline {
\t \t \t margin: 0px;
\t \t \t padding: 0px;
\t \t \t width: 0%;
\t \t \t visibility: hidden;
\t \t \t animation-name: expand;
\t \t \t animation-delay: 0.75s;
\t \t \t animation-duration: 0.8s;
\t \t \t animation-timing-function: ease-in-out;
\t \t \t -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
\t \t \t animation-fill-mode: forwards;
\t \t }
\t \t @keyframes expand {
\t \t \t from {
\t \t \t \t width: 0%;
\t \t \t }
\t \t \t to {
\t \t \t \t width: 100%;
\t \t \t \t visibility: visible;
\t \t \t }
\t \t }
\t \t #gradient {
\t \t \t position: absolute;
\t \t \t width: 100%;
\t \t \t height: 10px;
\t \t \t bottom: 0px;
\t \t \t left: 0px;
\t \t \t background: white; /* For browsers that don't support gradients */
\t \t \t background: -webkit-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Safari 5.1-6*/
\t \t \t background: -o-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Opera 11.1-12*/
\t \t \t background: -moz-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Fx 3.6-15*/
\t \t \t background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0)); /*Standard*/
\t \t }
\t \t #content {
\t \t \t display: flex;
\t \t \t width: 100%;
\t \t \t height: 900px;
\t \t \t background-color: white;
\t \t }
\t \t /* Custom Scrollbar CSS */
\t \t ::-webkit-scrollbar {
\t \t \t width: 10px;
\t \t }
\t \t ::-webkit-scrollbar-track {
\t \t \t background: rgba(255,255,255,1);
\t \t \t -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
\t \t \t -webkit-border-radius: 50px;
\t \t \t border-radius: 50px;
\t \t }
\t \t ::-webkit-scrollbar-thumb {
\t \t \t -webkit-border-radius: 10px;
\t \t \t border-radius: 10px;
\t \t \t background: rgba(150,150,150,1);
\t \t }
\t \t ::-webkit-scrollbar-thumb:window-inactive {
\t \t \t background: rgba(150,150,150,0.6);
\t \t }<body>
\t <div id="topSegment">
\t \t <a href="index.html">
\t \t \t <img src="Weather%20Icon.svg" alt="CGS Weather Icon" id="frontLogo" >
\t \t </a>
\t \t <div id="searchBar">
\t \t \t <div id="outer">
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t <div id="weatherInformation">
\t \t \t <p>CAMBERWELL, MELBOURNE</p>
\t \t \t <hr id="underline">
\t \t \t <p>28°</p>
\t \t </div>
\t \t <div id="gradient"></div>
\t </div>
\t <div id="content"></div>
</body>flexといくつかの行を使用して実際には簡単な解決策があると確信していますが、私はそれらが何であるか分かりません。
Welcome to StackOverflow。あなたが見たいと思うものと見えないものを明記してください。あなたのテンプレートと実際のスニペットはかなり異なって見えます。また、特定の質問をしてみてください。宜しくお願いします。 – YakovL
私はあなたがこれに全くフレックスを使用すべきではないと思います。 – poepje
マークアップの変更はいくつかありますが、検索バー/水情報がページ幅に合わない場合のレイアウトはどれですか？ – LGSon