Photoshop Question posted in
The official user guide can be found here.

how to have 100 "responsive" div squares (10 per row) in a flex container while keeping it constrained to it's wrapper? – Photoshop

For a better idea of what I’m trying to do I created this photoshop mockup of a mobile, tablet, and desktop view:

enter image description here

HTML

    <div class="wrapper">
        <ul class="flex-container">
            <li><div>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
            <li><div>4</div></li>
            <li><div>5</div></li>
            <li><div>6</div></li>
            <li><div>7</div></li>
            <li><div>8</div></li>
            <li><div>9</div></li>
            <li><div>10</div></li>
            <li><div>11</div></li>
            <li><div>12</div></li>
            <li><div>13</div></li>
            <li><div>14</div></li>
            <li><div>15</div></li>
            <li><div>16</div></li>
            <li><div>17</div></li>
            <li><div>18</div></li>
            <li><div>19</div></li>
            <li><div>20</div></li>
            <li><div>21</div></li>
            <li><div>22</div></li>
            <li><div>23</div></li>
            <li><div>24</div></li>
            <li><div>25</div></li>
            <li><div>26</div></li>
            <li><div>27</div></li>
            <li><div>28</div></li>
            <li><div>29</div></li>
            <li><div>30</div></li>
            <li><div>31</div></li>
            <li><div>32</div></li>
            <li><div>33</div></li>
            <li><div>34</div></li>
            <li><div>35</div></li>
            <li><div>36</div></li>
            <li><div>37</div></li>
            <li><div>38</div></li>
            <li><div>39</div></li>
            <li><div>40</div></li>
            <li><div>41</div></li>
            <li><div>42</div></li>
            <li><div>43</div></li>
            <li><div>44</div></li>
            <li><div>45</div></li>
            <li><div>46</div></li>
            <li><div>47</div></li>
            <li><div>48</div></li>
            <li><div>49</div></li>
            <li><div>50</div></li>
            <li><div>51</div></li>
            <li><div>52</div></li>
            <li><div>53</div></li>
            <li><div>54</div></li>
            <li><div>55</div></li>
            <li><div>56</div></li>
            <li><div>57</div></li>
            <li><div>58</div></li>
            <li><div>59</div></li>
            <li><div>60</div></li>
            <li><div>61</div></li>
            <li><div>62</div></li>
            <li><div>63</div></li>
            <li><div>64</div></li>
            <li><div>65</div></li>
            <li><div>66</div></li>
            <li><div>67</div></li>
            <li><div>68</div></li>
            <li><div>69</div></li>
            <li><div>70</div></li>
            <li><div>71</div></li>
            <li><div>72</div></li>
            <li><div>73</div></li>
            <li><div>74</div></li>
            <li><div>75</div></li>
            <li><div>76</div></li>
            <li><div>77</div></li>
            <li><div>78</div></li>
            <li><div>79</div></li>
            <li><div>80</div></li>
            <li><div>81</div></li>
            <li><div>82</div></li>
            <li><div>83</div></li>
            <li><div>84</div></li>
            <li><div>85</div></li>
            <li><div>86</div></li>
            <li><div>87</div></li>
            <li><div>88</div></li>
            <li><div>89</div></li>
            <li><div>90</div></li>
            <li><div>91</div></li>
            <li><div>92</div></li>
            <li><div>93</div></li>
            <li><div>94</div></li>
            <li><div>95</div></li>
            <li><div>96</div></li>
            <li><div>97</div></li>
            <li><div>98</div></li>
            <li><div>99</div></li>
            <li><div>100</div></li>
        </ul>
    </div>

As I’m still learning about how flexbox works I think this will give me a good idea about it. Thanks for your help in advance!

Tags:

2

Answers


  1. 0

    Check if this can help you

    DEMO

    CSS

    * {
  margin: 0;
  padding: 0;
}
html, body, .wrapper, .flex-container {
  height: 100%
}
.flex-container li {
  list-style: none;
  width: 10%;
  float: left;
  height: 10%;
  box-sizing: border-box;
  border: 2px solid #fff;
  background: #ccc
}
    Login or Signup to reply.
  2. 0

    This is easy with CSS calculations..

    as I can see your Images in any device you want 10 Rows and 10 Columns with size changes as per the device….

    CSS:

    html,body {
    margin:0;
    padding:0;
    height:100%;
}
.wrapper{
    margin:0;padding:0;
    display:block;
    width:100%;
    height:100%;
}
ul.flex-container{
    list-style:none;
    margin:0;padding:0;
    height: 100%;
    width:100%;
}
ul.flex-container li{
    background-color:#777;
    position:relative;
    display:inline-block;
    float:left;
    width:8%;
    margin:0.50% 1%; /* 0.50 for fix of the height overflow*/
    height:8%;
    padding:0;
}

    Working Fiddle

    Update: Working Flex Model:

    CSS:

     html,body {margin:0;padding:0;height:100%;}
.wrapper{
    margin:0;padding:0;
    display:block;
    width:100%;
    height:100%;
}
ul.flex-container{
    list-style:none;
    margin:0;padding:0;
    height: 100%;
    width:100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
}
ul.flex-container li{
    background-color:#777;
    display:inline-flex;
    flex-basis:8%;
    margin:auto 1%; /*fix of the width*/
    flex-shrink:1;
    flex:'flex-shrink' | 'flex-basis';
}

    Working Fiddle with Flex

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search