סידור DIV שיתפוס את כל השטח - CSS

[davidnead]

אני מנסה לבצע את המשימה הבאה:

בתוך div מסויים, אני רוצה להכניס עוד כמה divs. אני רוצה שכל הdivs יחד ימלאו 100% מהשטח של הdiv החיצוני. אם הייתי יודע מראש את מספר הdivs לא הייתה בעיה, למשל אם המספר הוא 3 הייתי נותן לכל אחד33%. הבעיה שזה קור בזמן ריצה על פי נתונים שנשאבים ממסד נתונים, אין לי מושג מראש כמה divs יהיהו. איזו הגדרה אני יכול לתת להם כדי שכל אחד יתפוס את כל השטח, וכאשר מגיע עוד אחד הוא יקטין את הקודם וימלא את השטח שנוצר?

תודה

 

[GolanArt]

פשוט מאד. תן לדיב הראשי שלך דיספלאי: פלקס, ולדיב הפנימי פלקס: 1

הנה דוגמה:

<div class = "div1">

 <div class = "div2">
 </div> 

 <div class = "div2"> 
 </div> 

<div class = "div2"> 
</div>

</div>


<style>

.div1{
height:500px;
width:500px;
background-color:red;
display: flex;
}
.div2{
height:400px;
background-color:blue;
border: 2px black solid;
float:right;
flex: 1;
}

</style>

 

[davidnead]

תודה רבה! אני לא מכיר בכלל את ההגדרה flex, אני לא בטוח שהבנתי כיצד להשתמש בה.

למשל, זה הקוד שלי:

var parentDiv = $("<div>").css(}"height"" "500px", display: "flex"})
$("body").append(parentDiv)

for (i=0;i<arr.lenght;i++){       //האורך של arr לא ידוע
   $(parentDiv).append(
        $("<div">).css({height: "100%", flex:1})
   )
}

לזה התכוונת? זה אמור לעבוד?

פשוט מאד. תן לדיב הראשי שלך דיספלאי: פלקס, ולדיב הפנימי פלקס: 1

הנה דוגמה:

<div class = "div1">

 <div class = "div2">
 </div>

 <div class = "div2">
 </div>

<div class = "div2">
</div>

</div>


<style>

.div1{
height:500px;
width:500px;
background-color:red;
display: flex;
}
.div2{
height:400px;
background-color:blue;
border: 2px black solid;
float:right;
flex: 1;
}

</style>

 

[GolanArt]

תודה רבה! אני לא מכיר בכלל את ההגדרה flex, אני לא בטוח שהבנתי כיצד להשתמש בה.

למשל, זה הקוד שלי:

var parentDiv = $("<div>").css(}"height"" "500px", display: "flex"})
$("body").append(parentDiv)

for (i=0;i<arr.lenght;i++){       //האורך של arr לא ידוע
   $(parentDiv).append(
        $("<div">).css({height: "100%", flex:1})
   )
}

לזה התכוונת? זה אמור לעבוד?

זה אני לא יודע לענות לך, אני לא בקיא מספיק בJS...
אבל אם תריץ את הCSS שנתתי לך תראה איך זה עובד.

 

[davidnead]

tu

זה אני לא יודע לענות לך, אני לא בקיא מספיק בJS...
אבל אם תריץ את הCSS שנתתי לך תראה איך זה עובד.

אוקי, תודה רבה. זה עבד יופי. זה אכן סידר אותם זה לצד זה. כעת, כוונתי הייתה לגובה, זה מעל זה. איזו הגדרה צריך לשנות? אי לא מבין איך הפלקס הזה עובד, אז לא מבין מה הגדיר אותם לעמוד לרוחב. זה סוג של float?

 

[איש פשוט]

https://www.codebrain.co.il/המדריך-המלא-ל-flexbox-ב-css/
מדריך מעולה בעברית לflax.

 

[GolanArt]

tu

אוקי, תודה רבה. זה עבד יופי. זה אכן סידר אותם זה לצד זה. כעת, כוונתי הייתה לגובה, זה מעל זה. איזו הגדרה צריך לשנות? אי לא מבין איך הפלקס הזה עובד, אז לא מבין מה הגדיר אותם לעמוד לרוחב. זה סוג של float?

לגובה? למה צריכים לגובה?

 

[GolanArt]

נסה את הקוד הזה (שים לב! כדי להדגיש בחרתי עובי קו שחור של 2PX, לכן הגדרתי רוחב
מינימלי של 31% אבל בהעדר קו מתאר (בורדר) אתה תשתמש ב33%)
בקוד הזה אחרי שלושה דיבים יש נפילת שורה, אבל אם תרצה שהאחרון לא יתפוס את
כל השורה, אז תוסיף עוד שלושה דיבים שקופים באופן קבוע אחרי הדיב האחרון.

<div class = "div1">
 <div class = "div2">

 </div>
 <div class = "div2">
 
 </div>
 <div class = "div2">

 </div>
<div class = "div2">


</div>
</div>
<style>
.div1{
height:500px;
width:500px;
background-color:red;
display: flex;
flex-wrap: wrap;
}
.div2{
height:400px;
background-color:blue;
border: 2px black solid;
float:right;
flex: 1;
min-width:31%;

}

</style>

 

[davidnead]

תודה רבה! אך למעשה, המדריך שאיש פשוט נתן, נתן לי את הפתרון הפשוט, הייתי רק צריך לשנות את ההגדרה משורה לעמודה, כך:
"flex-direction": "column"
אולי לא הייתי מספיק ברור בשאלה.
בכל אופן, תודה רבה. זה ידע חשוב מאוד, היו לי חיים יותר קלים בCSS אם הייתי מכיר את הפלקס קודם. זה מה שקורה כשאתה לומד CSS ממדריכים ישנים באינטרנט.