मैं वास्तव में फ्लेक्स डिस्प्ले से भ्रमित हूं और मुझे उम्मीद है कि कोई मदद कर सकता है।

मैं इस साइट को फिर से बनाने की कोशिश कर रहा हूँ https://jsbin.com/vafexudini/edit?html,css

मुझे बाईं ओर कुछ सामग्री चाहिए (अनुभाग-ए), कुछ बीच में (अनुभाग-बी) और कुछ दाईं ओर (अनुभाग-सी)।

खंड-ए सही जगह पर प्रतीत होता है लेकिन मुझे सामग्री बीच में और पूरी तरह से सही नहीं मिल रही है।

.container-1 {
  display: flex;
  max-width: 100%;
  background-color: #F7F7F7;
  height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
}


/*section-a*/

.section-a {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  flex: 2;
  position: relative;
  top: 20px;
  justify-content: center;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
  margin-right: -7px;
  justify-content: center;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}
<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>
1
user8322222 26 सितंबर 2017, 00:16

2 जवाब

सबसे बढ़िया उत्तर

आप flex और justify-content का उपयोग section-a और -c के लिए भी कर सकते हैं।

flex का उपयोग -b के लिए भी किया जा सकता है।

flex-wrap यहां भी मदद कर सकता है।

align-items के बजाय position + top भी उपयोगी हो सकते हैं।

एक min-height, height से अधिक सुरक्षित हो सकता है (या अन्य सामग्री/डिज़ाइन के आधार पर नहीं)

flex:1 a & c के लिए मेरी राय में एक अच्छा विकल्प था।

उदाहरण

.container-1 {
  display: flex;
  max-width: 100%;
  background-color: #F7F7F7;
  min-height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
  align-items:center;
}




.section-a, .section-c {
  flex: 1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  display:flex;
  flex-wrap:nowrap;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  justify-content:flex-end;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}
<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>
0
G-Cyrillus 26 सितंबर 2017, 00:32

कंटेनर में justify-content: space-between; जोड़ें, चाइल्ड तत्वों से सभी flex पैरामीटर हटाएं और उस एक नकारात्मक मार्जिन को हटा दें जो आपके पास है:

.container-1 {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  background-color: #F7F7F7;
  height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
}


/*section-a*/

.section-a {
  position: relative;
  top: 20px;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  position: relative;
  top: 20px;
  justify-content: center;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  position: relative;
  top: 20px;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}
<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>
0
Johannes 26 सितंबर 2017, 00:30