html - css布局的设置问题

Question

1.想要实现一种布局 如果p的数量小于或等于2则里面的内容是水平居中，如果内容超过了2个 则第三个只显示一半通过滚动来显示全内容。 这三种情况想用共通的css来实现 现在我的想法是用flex方式 但是没整出来。
情况1:<ul>

    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
</ul>

情况2：<ul>

    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
  </ul>

情况3：<ul>

    <li><p>此处放图片</p></li>
</ul>

现在样式是这样写的
ul{

        display:flex;
        align-items: center;
    }
    li{flex: 1;flex-shrink: 1;}

Answer 1

If I understand correctly, you mean that the third starting style is different from the first two, then you can use this selector:

li{
    前两个的样式
}
li:nth-child(2){
    第三个的样式
}

Answer 2

This kind of problem cannot be solved with just one flex.
You can set three styles respectively, and add different classes to ul by judging the number of p through js.

Answer 3

 ul.flexul{
            display:flex;
            //不换行居中
            align-items: center;
            flex-wrap:no-wrap;
            overflow:scroll;
    }
    //获取li的个数
   var linumber= $(".flexul li").length;
   if($(".flexul li:eq(2)")){
       var lithreewidth=$(".flexul li:eq(2)").offsetWidth;
   }
  if(linumber>2){
      $(".flexul").css(" align-items","flex-start");
       $(".flexul li:eq(0)").css("margin-left",lithreewidth/2+"px");
  }