with - enable in css




مربع المرنة: محاذاة الصف الأخير إلى الشبكة (14)

لدي تصميم بسيط في صندوق مرن مع حاوية مثل:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

الآن أريد أن تتم محاذاة العناصر الموجودة في الصف الأخير مع الآخر. justify-content: space-between; يجب استخدامه لأنه يمكن ضبط عرض الشبكة وارتفاعها.

حاليا يبدو

هنا ، أريد أن يكون العنصر في أسفل اليسار في "العمود الأوسط". ما هي أبسط طريقة لتحقيق ذلك؟ هنا jsfiddle صغير يوضح هذا السلوك.


أضف :after ذلك الملء التلقائي للفضاء. لا داعي لتلوث HTML الخاص بك. هنا هو codepen تظهر عليه: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid:after {
  content: "";
  flex: auto;
}

إذا كان عرض الأطفال متغيراً (ينتج عنه عدد متغير من الأطفال لكل صف) ، فلا توجد طريقة للقيام بذلك مع CSS بمفرده. لذا تحولت إلى JavaScript إلى:

  • إضافة عنصر .sizer كطفل آخر ، مبدئيًا باستخدام flex-basis:100%
  • تقلل تدريجياً أساسها flex-basis حتى "تقفز" على الصف السابق (أو تصل إلى flex-basis:0% )
  • عندما يحدث ما سبق ، فإنه يدفع جميع العناصر في الصف الأخير في بداية الصف: المهمة المنجزة!

العامل ، مثال عام:

// first part of the script generates cards with random words, ignore it

let words = [
  'interesting',
  'tongue',
  'excellent',
  'start',
  'sticky',
  'lame',
  'lopsided',
  'ill-informed',
  'terrible',
  'reduce',
  'near',
  'order'
]
for (var i = 0; i < 20; i++) {
  let text = '';
  for (var j = 0; j < 3; j++) {
    text += words[parseInt(Math.random() * words.length)] + ' '
  }
  $('.container').append($('<div />', {
    class: 'card',
    text: text
  }))
}

// the juice starts here:

$('.container').append(
  $('<div />', {
    class:'sizer'
  }));

let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
    
while ( $('.sizer')[0].getBoundingClientRect().top === topSizer &&
        topSizer > 0 ) {
    $('.sizer').css({flexBasis:(perCent--)+'%'});
}
.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.card {
  flex: 1 1 0;
  padding: .8rem;
  border: 1px solid #ccc;
  margin: 0 -1px -1px 0;
}
.sizer {
  flex-basis: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

بينما يكون البرنامج النصي عامًا تمامًا ، فإنه يوضح المبدأ. ربما يجب عليك استخدام أسماء فئات محددة أكثر في سيناريو واقعي.

إخلاء المسؤولية: أعلم أن هذا الحل لا يقوم بمحاذاة العناصر "للشبكة" ، كما هو مطلوب في البداية ولكن ، لسبب ما ، يشار إلى هذا السؤال كإجابة للأسئلة الأخرى ، حيث يسأل الناس فقط كيف يمكنهم محاذاة العناصر في الصف الأخير ، مع عرض متفاوت ، إلى اليسار ، مع الاحتفاظ بالأطفال على الصفوف السابقة تمتد لملء الصف الكامل. لذا اعتقدت أنني يجب أن أضيف جوابي هنا.


إذا كنت تريد شبكة ذات مساحة ما بين العناصر والعناصر التي تبدأ من دون أي مساحة أولية ، فإن هذا الحل البسيط يعمل:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

إذا كنت تريد مساحة 5px الأولية ، فما عليك سوى إزالة الهامش السلبي :) بسيط.

الجواب المقبول ، في حين أنه جيد ، فإنه يتسبب في عدم وجود مسافة بين العناصر في الصف الثاني.


باستخدام flexbox وبعض استعلامات الوسائط ، جعلت هذا القليل من العمل حول: http://codepen.io/una/pen/yNEGjv (في حد ذاته قرصان ولكن يعمل):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

قد تكون إحدى التقنيات هي إدخال عدد من العناصر الإضافية (العدد الأقصى للعناصر التي تتوقع أن يكون لديك في صف واحد) والتي يتم منحها ارتفاعًا صفريًا. ما زال الفضاء منقسمًا ، لكن الصفوف الزائدة لا تنهار:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}
<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

في المستقبل ، قد يصبح هذا قابلاً للتحقيق من خلال استخدام multiple ::after(n) .


كما ذكرت الملصقات الأخرى - لا توجد طريقة نظيفة لمحاذاة الصف الأخير باستخدام flexbox (على الأقل حسب المواصفات الحالية)

مع ذلك ، لما يستحق: مع وحدة CSS Grid Layout Module ، من السهل جدًا إنتاج:

أساسا تتلوث التعليمات البرمجية ذات الصلة إلى هذا:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) جعل عنصر الحاوية حاوية شبكة

2) اضبط الشبكة بأعمدة تلقائية بعرض 100 بكسل. (لاحظ استخدام auto-fill (كما هو مُحدد بالتلائم auto-fit - والذي يؤدي (لتصميم صف واحد) إلى تصغير المسارات الفارغة إلى 0 - مما يتسبب في توسيع العناصر لتشغل المساحة المتبقية. وقد يؤدي ذلك إلى تبريرها. الفضاء بين "تخطيط عندما يكون الشبكة صف واحد فقط وهو في حالتنا ليس ما نريده. (تحقق من هذا العرض التوضيحي لمعرفة الفرق بينهما)).

3) تعيين الفجوات / المزاريب لصفوف وأعمدة الشبكة - هنا ، حيث تريد تخطيط "المسافة بين" - ستكون الفجوة في الواقع الحد الأدنى من الفجوة لأنها سوف تنمو حسب الضرورة.

4) على غرار flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Demo (تغيير الحجم لمعرفة التأثير)


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

http://cssdeck.com/labs/pvsn6t4z (ملاحظة: البادئات غير مضمّنة)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

ومع ذلك ، سيكون من الأسهل استخدام الأعمدة فقط ، والتي تتمتع بدعم أفضل ولا تتطلب تحديد ارتفاع معين:

http://cssdeck.com/labs/dwq3x6vr (ملاحظة: البادئات غير مضمّنة)

ul {
  columns: 15em;
}

لقد صنعت SCSS mixin له.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

هذا هو الارتباط codepen: http://codepen.io/diana_aceves/pen/KVGNZg

عليك فقط لتعيين عرض العناصر في النسبة المئوية وعدد الأعمدة.

آمل أن يساعدك هذا.


نعم فعلا.! يمكننا ذلك ولكن مع بعض الاستعلامات عن وسائل الإعلام والحد الأقصى لا من الأعمدة محددة مسبقا .

أنا هنا باستخدام 4 أعمدة. تحقق من شفرتي:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}
<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

ملحوظة
1) لا حاجة لإنشاء div الأطفال. قد يكون أي علامة أخرى مثل "img" r ما تريد ..
2) إذا كنت تريد المزيد من الأعمدة ضبط استعلامات الوسائط والحد الأقصى no.of الأعمدة.


هذا الإصدار هو أفضل طريقة للكتل ذات العرض الثابت:

http://codepen.io/7iomka/pen/oxxeNE

في حالات أخرى - نسخة من dalgard

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}
<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>


هذا هو مزيج من الكثير من الإجابات ولكنه يفعل بالضبط ما كنت في حاجة إليه - وهو محاذاة الطفل الأخير في حاوية مرنة إلى اليسار مع الحفاظ على المسافة بين السلوك (في هذه الحالة يكون ثلاثة أعمدة نسق).

وإليك الترميز:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

هنا زوجان آخران من خلاصات scss.

تفترض هذه المزيجات أنك لن تستخدم ملحقات js مثل Isotope (لا تحترم ترتيب ترميز html ، وبالتالي العبث بقواعد css nth).

أيضا ، سوف تكون قادرا على الاستفادة الكاملة منها خاصة إذا كنت تكتب نقاط التوقف الخاصة بك استجابة بطريقة النقالة أولا. بشكل مثالي ستستخدم flexbox_grid () على نقطة توقف أصغر و flexbox_cell () على نقاط التوقف التالية. سوف يعتني flexbox_cell () بإعادة تعيين الهوامش التي تم ضبطها سابقًا والتي لم تعد مستخدمة في نقاط التوقف الأكبر.

وبالمناسبة ، طالما كنت تقوم بإعداد خصائص المرن الخاصة بك بشكل صحيح ، يمكنك أيضًا استخدام flexbox_cell () فقط على العناصر ، إذا كنت تريد ذلك.

هنا الرمز:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

الاستعمال:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

من الواضح أن الأمر متروك لك في النهاية لتعيين حشوة الحاوية / الهامش / العرض والهوامش السفلية للخلية وما شابه ذلك.

آمل أن يساعد!


والحل الممكن هو استخدام justify-content: flex-start; على حاوية .grid ، وفرض قيود على حجم الأطفال ، والهوامش على العناصر الفرعية المناسبة - اعتمادًا على العدد المطلوب من الأعمدة.

بالنسبة إلى شبكة من 3 أعمدة ، سيبدو CSS الأساسي على النحو التالي:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

إنه حل آخر غير مثالي ، لكنه يعمل.

http://codepen.io/tuxsudo/pen/VYERQJ


يبدو وكأنه لا أحد اقترح الحل المرن-النمو في البند الأخير. والفكرة هي أن يكون لديك عنصر فليكس الأخير الخاص بك لاتخاذ كل مكان يمكنه استخدام النمو المرن: 1.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

ملاحظة: هذا الحل ليس مثالياً ، خاصة إذا كان لديك عناصر مركزية داخل العناصر المرنة الخاصة بك لأنها سوف تركز على عنصر فليكس الأخير الضخم.







grid-layout