w3schools - title html




justify-content: المسافة بين الفشل في محاذاة العناصر كما هو متوقع (2)

تكمن المشكلة في تعارض مع ورقة أنماط Bootstrap ، والتي تضع العناصر الزائفة في الحاوية المرنة. يؤدي هذا space-between لحساب عناصر متعددة المرن بدلاً من عنصرين فقط.

إليك الحاوية المرنة الخاصة بك:

تتم محاذاة قائمة الشعار والتنقل مع justify-content: space-between ، ولكن لا يتم وضعها في الحواف المقابلة. يشبه المحاذاة space-around أكبر.

فيما يلي Bootstrap ::before و ::after العناصر الزائفة (أو العناصر الزائفة المرنة):

كما هو مذكور في وثائق Firefox :

في التدفق ::after و ::before العناصر الزائفة هي عناصر المرن.

دعنا نضع بعض المحتوى في الزائفة:

مثل تسليط الضوء الأسود في غرفة موتيل ، ترى الكثير من الأشياء التي كنت ترغب في عدم وجودها.

قم بإزالة (أو تجاوز) العناصر الزائفة وانتهت مشكلتك:

مزيد من التفاصيل حول الحاويات المرنة والعناصر الزائفة:

  • عناصر الزائفة كسر تبرير المحتوى: المسافة بين في تخطيط flexbox
  • تحجيم ومواءمة العنصر (العناصر) المرن في الصف الأخير بشكل صحيح
  • طرق محاذاة العناصر المرنة على طول المحور الرئيسي (انظر الإطار رقم 81)

كنت بحاجة إلى استخدام flexbox لتوسيط نظام التنقل الخاص بي ، وبالتالي توصلت إلى ما يلي:

.navbar-brand > img {
  width: 100px;
}
.navbar-default {
  background-color: #fff;
  border-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
  color: #464646;
  text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
  color: #727272;
}
.navbar-default .navbar-nav > li:not(.active) > a:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  right: 30%;
  height: 1px;
  background: #ed1c24;
  opacity: 0;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.navbar-default .navbar-nav > li > a:hover:before {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
.navbar-default .navbar-nav > li:first-child > a {
  font-weight: 700;
}
.navbar-default .navbar-nav > li.active > a {
  background: #ed1c24;
  color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  position: relative;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active > a:active {
  background: #e0222a;
  color: #fff;
}
.navbar-default .navbar-nav > li.active:hover > a:after {
  bottom: 0;
}
.navbar-default .navbar-nav > li.active > a:after {
  font-family: FontAwesome;
  content: '\f078';
  position: absolute;
  bottom: 5px;
  font-size: 0.6em;
  /*opacity: 0.8;*/
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* use flexbox to center align nav elements above 992px */

@media (max-width: 992px) {
  .navbar-default .navbar-nav > li > a {
    text-align: center;
  }
  .navbar-collapse {
    max-height: 350px;
    overflow-y: hidden;
  }
}
@media (min-width: 992px) {
  .navbar-default {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navbar-default {
    min-height: 100px;
  }
  .navbar-default .navbar-right {
    display: flex;
    align-items: center;
  }
  .navbar-default > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo">
      </a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.html">Home</a>
        </li>
        <li><a href="consulting.html">CONSULTING</a>
        </li>
        <li><a href="devices.html">Medical Devices</a>
        </li>
        <li><a href="">Servises</a>
        </li>
        <li><a href="">News</a>
        </li>
        <li><a href="">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

العبث هنا

كما ترون من HTML ، تحتوي .container على .container تابعين.

لدي تطبيق CSS التالي على عنصر .container :

.navbar-default > .container{
        display: flex;
        align-items:center;
        justify-content:space-between;
    }

المشكلة space-between مسافات لا تجعل عنصرين تابعين للحاوية في الحواف اليمنى واليسرى للحاوية.

السلوك الذي أريده هو أن يكون العنصران الفرعيان على الحافة اليسرى واليمنى ، ويمكن تحقيق ذلك باستخدام العوامات ، IE ، وأنا أطفو طفلًا واحدًا إلى اليسار والآخر على اليمين.

أيضًا إذا قمت بتطبيق flex-start flex-end فسيتم سحب العناصر إلى الحافة ، ولكن مع flex-start flex-end ، سيتم سحب كلا العنصرين إلى جانب واحد. وبالتالي أنا بحاجة إلى استخدام space-between .

هل يمكن أن يقول لي أحدهم لماذا لا يعمل space-between ؟ يتسبب هذا الخطأ في مشكلة محاذاة ضخمة على موقعي بالكامل ، فيرجى إخبار شخص ما بما أفعله بشكل خاطئ.


نظرًا لأن العناصر ذات الوضع المرن تستجيب فقط للعناصر التابعة مباشرةً فقط. قم بلف كل شيء تحت فئة .container div ، واعطي هذا div position: flex justify-content: space-between .container justify-content: space-between السمة.

مثال:

<nav>
 <div class="container">
    <div class="wrapper">
      ...
    <div>
 </div>
</nav>

<style>
.wrapper {
  position: flex;
  justify-content: space-between;
}
</style>




flexbox