Question

这是我的代码段：

＆＃13;

.container {
  display: flex;
  flex-direction: column;
}
.container > div {
  padding: 20px;
  color: #fff;
  margin: 5px;
  text-align: center;
  font-size: 30px;
}
.fruits {
  order: 2;
  background: #ff5423;
}
.container :not(.fruits) {
  order: 1;
}
.flowers {
  background: #f970bd;
}
.trees {
  background: #049500;
}

＆＃13;

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

＆＃13;

我使用.fruits将所有flex-direction: column; div放在底部。还有另外两个div .flowers和.trees可以随机放置在.conatiner内的任何位置，我无法处理。我希望它们占用其父宽度的一半，因此它们只占一行。

我想要实现的目标：

50％的宽度在这里不起作用。我知道规则说方向是列式的，但是，我仍然希望有任何可用的方法/技巧来做到这一点！使用不同技术而不是使用flex的任何其他解决方法也会有所帮助。

Answer 1

您可以使用flex-direction: row执行此操作，只需要在父级flex-wrap: wrap上设置flex: 0 0 50%，然后在要求半宽的元素上设置* {box-sizing: border-box}。

您还需要使用calc()作为填充，* { box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; } .container > div { padding: 20px; color: #fff; margin: 5px; flex: 0 0 calc(100% - 10px); text-align: center; font-size: 30px; } .fruits { order: 2; background: #ff5423; } .container div:not(.fruits) { order: 1; flex: 0 0 calc(50% - 10px); } .flowers { background: #f970bd; } .trees { background: #049500; }作为边距。

＆＃13;

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

＆＃13;

public class BadgeUtils {

    public static void setBadge(Context context, int count) {
        setBadgeSamsung(context, count);
        setBadgeSony(context, count);
    }

    public static void clearBadge(Context context) {
        setBadgeSamsung(context, 0);
        clearBadgeSony(context);
    }


    private static void setBadgeSamsung(Context context, int count) {
        String launcherClassName = getLauncherClassName(context);
        if (launcherClassName == null) {
            return;
        }
        Intent intent = new Intent("android.intent.action.BADGE_COUNT_UPDATE");
        intent.putExtra("badge_count", count);
        intent.putExtra("badge_count_package_name", context.getPackageName());
        intent.putExtra("badge_count_class_name", launcherClassName);
        context.sendBroadcast(intent);
    }

    private static void setBadgeSony(Context context, int count) {
        String launcherClassName = getLauncherClassName(context);
        if (launcherClassName == null) {
            return;
        }

        Intent intent = new Intent();
        intent.setAction("com.sonyericsson.home.action.UPDATE_BADGE");
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.ACTIVITY_NAME", launcherClassName);
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.SHOW_MESSAGE", true);
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.MESSAGE", String.valueOf(count));
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.PACKAGE_NAME", context.getPackageName());

        context.sendBroadcast(intent);
    }


    private static void clearBadgeSony(Context context) {
        String launcherClassName = getLauncherClassName(context);
        if (launcherClassName == null) {
            return;
        }

        Intent intent = new Intent();
        intent.setAction("com.sonyericsson.home.action.UPDATE_BADGE");
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.ACTIVITY_NAME", launcherClassName);
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.SHOW_MESSAGE", false);
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.MESSAGE", String.valueOf(0));
        intent.putExtra("com.sonyericsson.home.intent.extra.badge.PACKAGE_NAME", context.getPackageName());

        context.sendBroadcast(intent);
    }

    private static String getLauncherClassName(Context context) {

        PackageManager pm = context.getPackageManager();

        Intent intent = new Intent(Intent.ACTION_MAIN);
        intent.addCategory(Intent.CATEGORY_LAUNCHER);

        List<ResolveInfo> resolveInfos = pm.queryIntentActivities(intent, 0);
        for (ResolveInfo resolveInfo : resolveInfos) {
            String pkgName = resolveInfo.activityInfo.applicationInfo.packageName;
            if (pkgName.equalsIgnoreCase(context.getPackageName())) {
                String className = resolveInfo.activityInfo.name;
                return className;
            }
        }
        return null;
    }


}

＆＃13;

如何在垂直排序的flex div的一行中放置两个div？

1 个答案: